Site navigation plugin

The site navigator module ensures transition between the site pages. Define navigation settings in ./pages.json of your multipage site.

eWizard.js supports navigation between site pages using the Vue.js router-view component and Vue Router API. For more information, see Vue Router documentation.

The navigation instance is bound to the Vue instance as $navigator. To access the site navigation methods, use the this.$navigator context on a page Vue instance.

Use the ewizardjs.navigator context when calling the site navigation methods in the browser console.

The site navigation plugin has the following methods for navigating to specific site pages.

goTo

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

Use goTo() in the index.vue file to go to a page from the pages.json file of a multipage 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>

As best practice, use only the v-goto directive for the navigation links to work in eWizard Editor.

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.$navigator.goToNextPage();

This method doesn't depend on the browser history and has no parameters.

To use the goToNextPage() method on a site page, add it to your page instance as follows:

// ./pages/home/index.vue

export default {
  name: "index",
  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.$navigator.goToPrevPage();

This method doesn't depend on the browser history and has no parameters.

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",
  methods: {
    goToPrevPage() {
      this.$navigator.goToPrevPage();
    },
  },
};

getCurrentPage

Use this method to return information about your current page in the site structure. The method returns the current page configuration object.

this.$navigator.getCurrentPage();

This method has no parameters and returns an object with information about the current page including name, ID, path, and other page properties.

Use the getCurrentPage() method to retrieve information about your current page in the site structure:

// ./pages/home/index.vue

export default {
  name: "index",
  methods: {
    getCurrentPageInfo() {
      const page = this.$navigator.getCurrentPage();
      console.log(page.id, page.name, page.path);
    },
  },
};

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 and returns an array of all page configurations.

To use the getPages() method on a site page, add it to your page instance as follows:

// ./pages/home/index.vue

export default {
  name: "index",
  methods: {
    listAllPages() {
      const pages = this.$navigator.getPages();
      pages.forEach(page => {
        console.log(page.id, page.name);
      });
    },
  },
};

getAnchorId

Use this method to get the current anchor ID (hash) from the URL:

this.$navigator.getAnchorId();

This method has no parameters and returns the current hash/anchor as a string.

Use the getAnchorId() method to retrieve the current URL anchor:

// ./pages/home/index.vue

export default {
  name: "index",
  methods: {
    getCurrentAnchor() {
      const anchorId = this.$navigator.getAnchorId();
      console.log(anchorId);
    },
  },
};

replace

The replace() method navigates to a location using Vue Router. Unlike push(), this method replaces the current entry in the browser history instead of adding a new one.

this.$navigator.replace(location);

The location parameter is required and can be either a string (path) or an object with the path and hash routing options.

Use the replace() method to navigate and replace the current history entry:

// ./pages/home/index.vue

export default {
  name: "index",
  methods: {
    navigateWithReplace() {
      // Replace current history entry with a new path
      this.$navigator.replace('/about');
      
      // Or replace with an anchor
      this.$navigator.replace({ path: '/about', hash: '#section1' });
    },
  },
};

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.

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

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

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

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.

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

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

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

openLink

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 that accepts the URL address. For example, this.$navigator.openLink("https://viseven.com") opens the specified URL address in a new browser window.

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

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

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

We recommended using the v-open directive with the link modifier instead of the openLink method. Links added through openLink can't be edited in eWizard Editor.

openDocument

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 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.

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

// ./common/pages/home/index.vue
import pdfFile from "../../common/media/pdfs/file.pdf";

export default {
  name: "index",
  methods: {
    openDocument() {
      this.$navigator.openDocument(pdfFile);
    },
  },
};

We recommended using the v-open directive with the pdf modifier instead of the openDocument method. Documents added through openDocument may be excluded from the final build and can't be edited in eWizard Editor.

Navigation hooks

The site navigator plugin provides hook methods that execute when entering or leaving pages. These hooks are useful for animations, transitions, or other page lifecycle events.

onenter

Registers a callback function that executes when a page is entered, after the transition animation ends.

this.$navigator.onenter(handler, options);

onleave

Registers a callback function that executes when leaving a page, after the transition animation ends.

this.$navigator.onleave(handler, options);

onbeforeenter

Registers a callback function that executes before entering a page, before the transition animation starts.

this.$navigator.onbeforeenter(handler, options);

onbeforeleave

Registers a callback function that executes before leaving a page, before the transition animation starts.

this.$navigator.onbeforeleave(handler, options);

Parameters for hooks

Each hook method has the following parameters:

• handler is a function that executes when the hook is triggered. It receives the HTMLElement of the current page.
• options is an optional object with hook configuration options.

Usage of navigation hooks

Use the navigation hooks to perform actions during page transitions:

// ./pages/home/index.vue

export default {
  name: "index",
  created() {
    this.$navigator.onenter((el) => {
      console.log('Page entered');
      // Perform animations or initialize components
    });

    this.$navigator.onleave((el) => {
      console.log('Page leaving');
      // Cleanup or stop animations
    });

    this.$navigator.onbeforeenter((el) => {
      console.log('About to enter page');
    });

    this.$navigator.onbeforeleave((el) => {
      console.log('About to leave page');
    });
  },
};