The site navigator module ensures navigation in sites (landing pages). Use the ./pages.json file to define the transition settings in a multiple page site.
With eWizard.js framework you can configure switching between the site pages using the Vue.js router-view component and Vue Router API. For more information, see Vue Router documentation.
Overview
The API 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 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 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 --> <template> <div> <button @click="goToNextPage">Go to the next page</button> </div> </template>
// ./pages/home/index.vue
export default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
goToNextPage() {
this.$navigator.goToNextPage();
},
},
};This code adds the HTML button to the site page. Click the Go to the next page button on the page to call the navigator.goToNextPage() method. The method executes transition from the current to the next page of your site defined in the ./pages.json file.
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()
To use the goToPrevPage() method on a site page, add this code to your page instance.
<!-- ./pages/home/index.vue --> <template> <div> <button @click="goToPrevPage">Go to the previous page</button> </div> </template>
// ./pages/home/index.vue
export default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
goToPrevPage() {
this.$navigator.goToPrevPage();
},
},
};This code adds the HTML button to the site page. Click the Go to the previous page button on the page to call the navigator.goToPrevPage() method. As a result, the method navigates from the current to the previous page defined in the ./pages.json file.
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()
To use the currentPage() method on a site page, add this code to your page instance.
// ./pages/home/index.vueexport default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
currentPage() {
this.$navigator.currentPage();
},
},
};The method returns the information about the current page.
TIP: This information allows you to understand which site page is open and which Vue component it uses. Also, it can help you to hide certain content that you use in the page layout on some site pages.
getPages()
Use this method to return information about all pages defined in the ./pages.json file. The information about each page includes:
• [PAGE_INDEX]—The page order number in the site structure (starting from 0). For example, 0, 1, 2.
• id—The page ID.
• name—The page name.
• component—The page Vue component.
• path—The site root path to the page.
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();
},
},
};The method returns the information about all pages in the site structure.
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)
To use the goToPage(path) method on a site page, add this code to your page instance.
<!-- ./common/pages/home/index.vue --> <template> <div> <button @click="goToAboutPage">Go to the About page</button> </div> </template>
// ./common/pages/home/index.vue
export default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
goToAboutPage() {
this.$navigator.goToPage("/about");
},
},
};This code adds the HTML button to the site page. Click the Go to the About page button on the page to call the navigator.goToPage("/about") method. As a result, the method navigates to the About site page.
push(location)
Use this method to navigate to a different 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()
To use the push() method on a site page, add this code to your page instance.
<!-- ./common/pages/home/index.vue --> <template> <div> <button @click="goToAboutPage">Go to the About page</button> </div> </template>
// ./common/pages/home/index.vue
export default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
goToAboutPage() {
this.$navigator.push("about");
},
},
};This code adds the HTML button to the site page. Click the Go to the About page button on the page to call the navigator.push("about") method. As a result, the method navigates to the About site page. You can also use the path ("/about") as the location parameter. Click the Back button in your browser, to return to the previous page.
replace(location)
Use this method to navigate to a different 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()
To use the replace() method on a site page, add this code to your page instance.
<!-- ./common/pages/home/index.vue --> <template> <div> <button @click="goToAboutPage">Go to the About page</button> </div> </template>
// ./common/pages/home/index.vue
export default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
goToAboutPage() {
this.$navigator.replace("/about");
},
},
};This code adds the HTML button to the site page. Click the Go to the About page button on the page to call the navigator.replace("/about") method. As a result, the method navigates to the About site page. You can also use the path ("/about") as the location parameter. When you click the Back button in your browser, you don't return to the previous page but stay on the same page.
back()
Use this method to navigate 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()
To use the back() method on a site page, add this code to your page instance.
<!-- ./common/pages/home/index.vue --> <template> <div> <button @click="goToPreviousPage">Go to the previous page</button> </div> </template>
// ./common/pages/home/index.vue
export default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
goToPreviousPage() {
this.$navigator.back();
},
},
};This code adds the HTML button to the site page. Click the Go to the previous page button on the page to call the navigator.back() method. As a result, the method navigates to one page backward in your site browsing history.
forward()
Use this method to navigate 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()
To use the forward() method on a site page, add this code to your page instance.
<!-- ./common/pages/home/index.vue --> <template> <div> <button @click="goToNextPage">Go to the next page</button> </div> </template>
// ./common/pages/home/index.vue
export default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
goToNextPage() {
this.$navigator.forward();
},
},
};This code adds the HTML button to the site page. Click the Go to the next page button on the page to call the navigator.forward() method. As a result, the method navigates to one page forward in your site browsing history.
openLink(path)
Use this method to open the specified link in a new browser window. For example, this.$navigator.openLink("https://viseven.com") 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()
To use the openLink() method on a site page, add this code to your page instance.
<!-- ./common/pages/home/index.vue --> <template> <div> <button @click="openThisLink">Open this link in a new window</button> </div> </template>
// ./common/pages/home/index.vue
export default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
openThisLink() {
this.$navigator.openLink("https://viseven.com");
},
},
};This code adds the HTML button to the site page. Click the Open this link in a new window button on the page to call the navigator.openLink("https://viseven.com") method. The method opens the specified link in a new browser window.
openDocument(path)
Use this method to open the specified document (PDF file) in a new browser window. For example, this.$navigator.openDocument("./common/media/pdfs/VisevenGuideLines.pdf") opens the specified 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()
To use the openDocument() method on a site page, add this code to your page instance.
<!-- ./common/pages/home/index.vue --> <template> <div> <button @click="openThisDocument">Open this document in a new window</button> </div> </template>
// ./common/pages/home/index.vue
export default {
name: "index",
components: {
DefaultSiteBlock01,
},
methods: {
openThisDocument() {
this.$navigator.openDocument("./common/media/pdfs/VisevenGuideLines.pdf");
},
},
};This code adds the HTML button to the site page. Click the Open this document in a new window button on the page to call the navigator.openDocument("./common/media/pdfs/VisevenGuideLines.pdf") method. The method opens the specified PDF document in a new browser window.