A router is process of binding a web URL to a specific resource or Vue component in the web application which allows to navigate from one component to another component in an application based on user action.
Steps to create routes in Vue
| 1. | Create routes array |
| 2. | Create Router instance and export |
| 3. | Include router in Vue application starup |
| 4. | Add links to navigate |
Create routes Array
To create routes for the application, the routes can be define as array where each route contains path, name and component property of the specified route object. It should be an array of such object.
1 const routes = [
2 {
3 path: "/",
4 name: "home",
5 component: HomeView,
6 },
7 {
8 path: "/about",
9 name: "about",
10 component: AboutView,
11 },
12 ];
Create router instance and export
Once routes are define, we have to create VueRouter instance by specifying the routes and save this file in router folder (inside root directory) with index.js.
Create router instance and export
1 import Vue from "vue";
2 import VueRouter from "vue-router";
3 import HomeView from "../views/HomeView.vue";
4 import AboutView from "../views/AboutView.vue";
5
6 Vue.use(VueRouter);
7
8 const routes = [
9 {
10 path: "/",
11 name: "home",
12 component: HomeView,
13 },
14 {
15 path: "/about",
16 name: "about",
17 component: AboutView,
18 },
19 ];
20
21 const router = new VueRouter({
22 mode: "history",
23 base: process.env.BASE_URL,
24 routes,
25 });
26
27 export default router;
28
Include router in Vue application startup
Once router is define, it needs to be include in the application, so Vue application know that which component need to render on specific URL. The router can be added in the application main.js file.
Registering router in the application
1 import Vue from "vue";
2 import App from "./App.vue";
3
4 import router from "./router";
5 import store from "./store";
6 Vue.config.productionTip = false;
7
8 new Vue({
9 router,
10 store,
11 render: (h) => h(App),
12 }).$mount("#app");
Note: If you creating application in Vue version 3, it can be possible by specifying router in the createApp function as below.
Create vue application in Vue 3
1 import { createApp } from "vue";
2 import App from "./App.vue";
3
4 import router from "./router";
5
6 createApp(App).use(router).mount("#app");
Adding router navigation in application
Once the router registered in the application, it is important to add navigation on UI, It can be specified either in the top or higher level component or based on application requirement using nav and router-link element.
Addling router navigation
1 <template>
2 <div>
3 <nav>
4 <router-link to="/">Home</router-link> |
5 <router-link to="/about">About</router-link>
6 </nav>
7 <router-view />
8 </div>
9 </template>
Route-based lazy loading in vue
The lazy loading allows to load component on demand dynamically when it render. The browser make fresh request to load component dynamic using import method as a regular component.
Access query param in router component in Vue
The query param is important feature while working with Router in Vue. It is also supported in the Vue similar to other framework. The query param can passed from the routes and access in the Vue component using $route instance variable using this keyword.
Access path or URL parameter in vue
Vue allows to pass path parameters in router. The path parameter can be specified while defining router for the Vue application. The parameter can either pass using navigation link element or dynamically based on user action as per application requirement.
Index or default route in Vue
The index Route loaded with the default base url when none of the routes will be selected or specified, The redirect property specify that if no route is selected redirect the User to default component. It act as fallback route in case none is selected.
Generic or fallback route in Vue
The generic or fallback route is important in Vue application which allows to avoid unexpected behavior in case specified route in URL doesn't exists in application.
Intercept route navigation in Vue
The intercepting route before and after navigation is important feature in Vue. It helps in many ways, if we want to add some validate before and after validation. In case, if we want to validate whether user is logged in or not, we can add validation and validate token before navigating to specified route.
Router methods
The router methods are used to perform operation while user programmatically want to navigate from one route to another. The router provides many methods which can be used to serve many features while developing Vue application.
Built-in component keep-alive in vue
The keep-alive component used with dynamic component rendering, it caches the component rather destroying previously added component, before dynamically added component replaced it. Also, it doesn’t render a DOM element in the tree.
Create router in Vue 3
Vue also allows to create router in Vue 3. Here, it uses the createRouter method to create router by specifying the required parameter.
Cache component inside router using template
The keep-alive component allows to cache the routed component which is currently opened by the element router-view component using v-slot directive.
Related options for your search