Skip to content

Vue Router

The Device Manager uses the Vue Router for UI navigation.

Vue Router is the official router for Vue.js. It integrates closely with Vue.js to enable the building of single-page applications (SPAs) with ease. Vue Router allows for the creation of complex navigational structures within Vue applications, managing the synchronization between the browser's URL and your application's Vue components.

Here are some key features and capabilities of Vue Router:

  • Dynamic Route Matching: You can design routes to match dynamic paths, allowing for parameterized URLs. This is particularly useful for creating user or item-specific pages based on IDs or other unique identifiers from the URL.

  • Nested Routes: Vue Router supports nested routes, enabling the development of nested component structures that reflect nested URLs. This is useful for applications that have a hierarchical structure requiring a UI that reflects this complexity.

  • Programmatic Navigation: Besides linking to specific routes with , Vue Router allows for programmatic navigation. This means you can navigate to different pages programmatically using JavaScript, which is useful for actions like redirecting a user after a form submission.

  • Navigation Guards: Vue Router provides navigation guards that allow you to hook into the routing process for operations like authentication checks before entering a route, or fetching data before a component is rendered.

  • Lazy Loading: To improve performance, Vue Router supports lazy loading of route components. This means components are only loaded when they are needed for the current route, reducing the initial load time of the application.

  • History Mode: Vue Router supports HTML5 history mode, which uses the history.pushState API to achieve URL navigation without a page reload. This creates a better user experience, with URL paths that look "normal" (without the hash # symbol) and are SEO-friendly.

Integrating Vue Router into a Vue.js application involves defining a set of routes, each associated with a component. When the application's URL changes, Vue Router matches the URL to the defined routes and renders the corresponding component, making it a vital part of creating SPA experiences with Vue.js.

The Device Manager uses a Display.json5 configuration file that is automatically translated by the Device Manager into route tables for the Vue Router.