Site navigation API | eWizard.js framework

Tags:

#API reference #Site navigation API #Site

# Overview

The site navigator module ensures navigation in sites (landing pages). Navigation means transition between the site pages. Use the ./pages.json file to define the navigation settings in a multi-page site.

The eWizard.js framework supports navigation between the site pages using the Vue.js router-view component and Vue Router API. For more information, see Vue Router documentation (opens new window).

The navigation instance is bound to the instance of Vue as $navigator. To access the site navigation API and its methods, use the following context on a page Vue instance.

this.$navigator

Use the following context when calling the site navigation API methods in the browser console.

ewizardjs.navigator

The site navigation API has the following methods for navigating to the specific site pages:

goToNextPage()
goToPrevPage()
currentPage()
getPages()
goToPage(path)
push(location)
replace(location)
back()
forward()
openLink(path)
openDocument(path)
goTo()

# goToNextPage()

Use this method to navigate from the current to the next page of your site according to the structure in the ./pages.json file. This method doesn't depend on the browser history.

this.$navigator.goToNextPage();

This method has no parameters.

# Usage of goToNextPage()

To use the goToNextPage() method on a site page, add this code to your page instance.

// ./pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    goToNextPage() {
      this.$navigator.goToNextPage();
    },
  },
};

# goToPrevPage()

Use this method to navigate from the current to the previous page of your site according to the structure in the ./pages.json file. This method doesn't depend on the browser history.

this.$navigator.goToPrevPage();

This method has no parameters.

# Usage of goToPrevPage()

Use the goToPrevPage() method to open the previous page in your site structure defined in the ./pages.json file.

// ./pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    goToPrevPage() {
      this.$navigator.goToPrevPage();
    },
  },
};

# currentPage()

Use this method to return information about your current page in the site structure: the name, ID, path, and the Vue component of the site page.

this.$navigator.currentPage();

This method has no parameters.

# Usage of currentPage()

Use the currentPage() method to return information about your current page in the site structure.

// ./pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    currentPage() {
      this.$navigator.currentPage();
    },
  },
};

# getPages()

Use this method to return information about all the pages of your site defined in the ./pages.json file.

this.$navigator.getPages();

This method has no parameters.

# Usage of getPages()

To use the getPages() method on a site page, add this code to your page instance.

// ./pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    getPages() {
      this.$navigator.getPages();
    },
  },
};

# goToPage(path)

Use this method to navigate to a specific page of your site.

this.$navigator.goToPage(path);

The path parameter is required. Its type is String.

The goToPage method is deprecated. Use the v-goto action or the goTo method to redirect to specific site pages.

# Parameters of goToPage(path)

The goToPage(path) method has one parameter.

path is the path to the page in the site root defined in the ./pages.json file. For example, this.$navigator.goToPage("/about") navigates to the About page.

# Usage of goToPage(path)

Use the goToPage(path) method to navigate to a specific page of your site by providing its path.

// ./common/pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    goToAboutPage() {
      this.$navigator.goToPage("/about");
    },
  },
};

# push(location)

The push(location) method opens the specified page of your site. This method pushes a new entry into the browser history. After navigating to the indicated site page, you can click the Back button in your browser to return to the previous page in the browser history. This is the method called internally when you click <router-link>. Clicking <router-link to="..."> is the same as calling the navigator.push() method.

this.$navigator.push(location);

The location parameter is required. Its type is String.

# Parameters of push()

The push() method has one parameter.

location is the page path or id. For example, this.$navigator.push("about") navigates to the About site page with the about ID from the ./pages.json file. You can provide the path value from the pages.json file as the location parameter. For example, this.$navigator.push("/about").

# Usage of push()

Use the push() method to open the specified page of your site.

// ./common/pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    goToAboutPage() {
      this.$navigator.push("about");
    },
  },
};

# replace(location)

The replace(location) method opens the specified page of your site. This method acts the same as the navigator.push() method. The difference is that it doesn't push a new entry to the browsing history but replaces the current entry. After navigating to the indicated site page, you can click the Back button in your browser and stay on the same page.

this.$navigator.replace(location);

The location parameter is required. Its type is String.

# Parameters of replace()

The replace() method has one parameter.

location is the page path or id. For example, this.$navigator.replace("about") navigates to the About site page with the about ID from the ./pages.json file. You can provide the path value from the pages.json file as the location parameter. For example, this.$navigator.replace("/about").

# Usage of replace()

Use the replace() method to open the specified page of your site.

// ./common/pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    goToAboutPage() {
      this.$navigator.replace("/about");
    },
  },
};

# back()

The back() method navigates one page back in your site browsing history. Click the Back button in your browser to return to the previous page.

this.$navigator.back();

This method has no parameters.

# Usage of back()

Use the back() method to navigate one page back in your site browsing history.

// ./common/pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    goToPreviousPage() {
      this.$navigator.back();
    },
  },
};

# forward()

The forward() method navigates one page forward in your site browsing history. Click the Forward button in your browser to navigate one page forward.

this.$navigator.forward();

This method has no parameters.

# Usage of forward()

Use the forward() method to navigate one page forward in your site browsing history.

// ./common/pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    goToNextPage() {
      this.$navigator.forward();
    },
  },
};

# openLink(path)

The openLink(path) method opens the specified link in a new browser window.

this.$navigator.openLink(path);

The path parameter is required. Its type is String.

# Parameters of openLink()

The openLink() method has one parameter:

path is the string that accepts the URL address. For example, this.$navigator.openLink("https://viseven.com") opens the specified URL address in a new browser window.

# Usage of openLink()

Use the openLink() method to open the specified link in a new browser window.

// ./common/pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    openThisLink() {
      this.$navigator.openLink("https://viseven.com");
    },
  },
};

# openDocument(path)

The openDocument(path) method opens the specified document (PDF file) in a new browser window.

this.$navigator.openDocument(path);

The path parameter is required. Its type is String.

# Parameters of openDocument()

The openDocument() method has one parameter.

path is the string that accepts the relative path to the PDF document. For example, this.$navigator.openDocument("./common/media/pdfs/VisevenGuideLines.pdf") opens the specified PDF document in a new browser window.

# Usage of openDocument()

Use the openDocument() method to open the specified PDF document in a new browser window.

// ./common/pages/home/index.vue

export default {
  name: "index",
  components: {
    DefaultSiteBlock01,
  },
  methods: {
    openThisDocument() {
      this.$navigator.openDocument("./common/media/pdfs/VisevenGuideLines.pdf");
    },
  },
};

# goTo()

Use goTo() to redirect to a page from the pages.json file of a multi-page site.

# Usage of goTo()

Use goTo() in the index.vue file to go to a page from the pages.json file of a multi-page site.

If the page ID is absent or incorrect, the goTo method redirects to a 404 page.

For example, a button that redirects to the Contacts page after clicking it:

<!-- ./pages/home/index.vue -->

<template>
<div>
  <div @click="$navigator.goTo('contacts')">Contacts</div>
</div>
</template>

← Navigation API Monitoring API→

# Site navigation API

# Overview

# goToNextPage()

# Usage of goToNextPage()

# goToPrevPage()

# Usage of goToPrevPage()

# currentPage()

# Usage of currentPage()

# getPages()

# Usage of getPages()

# goToPage(path)

# Parameters of goToPage(path)

# Usage of goToPage(path)

# push(location)

# Parameters of push()

# Usage of push()

# replace(location)

# Parameters of replace()

# Usage of replace()

# back()

# Usage of back()

# forward()

# Usage of forward()

# openLink(path)

# Parameters of openLink()

# Usage of openLink()

# openDocument(path)

# Parameters of openDocument()

# Usage of openDocument()

# goTo()

# Usage of goTo()