Overview
The site navigator module ensures transition between pages in sites (landing pages). Use the ./pages.json file to define the redirection settings in a multiple page site.
The eWizard.js framework supports switching between the site pages using the Vue.js router-view component and Vue Router API. For more information, see Vue Router documentation.
The navigator instance is bound to the instance of Vue as $navigator. To access the site navigator API and its methods, use the following context on a page Vue instance.
this.$navigator
Use the following context when calling the site navigator API methods in the browser console.
ewizardjs.navigator
The site navigator API has the following methods for navigating to the specific site pages:
• back()
goToNextPage()
Use this method to navigate from the current to the next page of your site according to the struсture 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.vueexport 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 struсture 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 struсture defined in the ./pages.json file.
// ./pages/home/index.vueexport default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
goToPrevPage() {
this.$navigator.goToPrevPage();
},
},
};currentPage()
Use this method to return information about your current page in the site struсture: 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 struсture.
// ./pages/home/index.vueexport 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.vueexport 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.
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.vueexport 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.vueexport 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.vueexport 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.vueexport 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.vueexport 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.vueexport 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.vueexport default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
openThisDocument() {
this.$navigator.openDocument("./common/media/pdfs/VisevenGuideLines.pdf");
},
},
};