什么叫動態路由呢？顧名思義就是程序員眼中的硬編碼與非硬編碼的區別。

還是拿之前的靜態路由來做對比

import Vue from 'vue' import Router from 'vue-router'Vue.use(Router)const globalRoutes = [{path: '/test', component: () => import('pages/Test.vue')} ]const router = new Router({mode: 'hash',isAddDynamicMenuRoutes:false,scrollBehavior: () => ({y: 0}),routes: globalRoutes })export default router

這是我們之前的寫法。

現在我們需要將

const globalRoutes = [{path: '/test', component: () => import('pages/Test.vue')} ]

這段代碼里路由動態化，從而實現動態路由加載的過程。

首先要實現這個目的，你的了解router的生命鉤子。

我們這里實現這個目的只用到 beforeEach 這一個方法，下面我們來實現這一過程。感興趣的老鐵可以去看vuerouter官網的介紹。

首先我們模擬一個后臺請求，創建nav.js

export const nav = [{label:'主頁',url:'Index',icon:'home'},{label:'測試',url:'Test',icon:'all_inclusive'}, ]

然后我們再router里面引入nav.js

import Vue from 'vue' import Router from 'vue-router' import {nav} from './nav'Vue.use(Router)const globalRoutes = [{path: '/test', component: () => import('pages/Test.vue')} ]const router = new Router({mode: 'hash',isAddDynamicMenuRoutes:false,scrollBehavior: () => ({y: 0}),routes: globalRoutes })router.beforeEach((to, from, next) => {if (!router.isAddDynamicMenuRoutes) {let list = [];nav.forEach(item => {let url = '/'+item.url.replace('/', '-').toLowerCase();let urlName = item.url + '.vue';list.push({label:item.label,url:url,icon:item.icon});mainRoutes.children.push({path: url, component: () => import(`pages/${urlName}`)})});router.addRoutes([mainRoutes,])router.isAddDynamicMenuRoutes = true;sessionStorage.setItem('nav', JSON.stringify(list));next({ ...to, replace: true })}else {next()} })export default router

這樣就實現了路由動態的效果了。是不是很簡單呢。

最后我將目錄結構截圖出來大家看下。

總結

以上是生活随笔為你收集整理的router vue 动态改变url_vue动态路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。