很多時候我們在項目的路由都是在前端配置好的但是有的時候為了進行全面的權限控制，會需要后臺給出路由表，前端再渲染。不用在前端配置。

下面主要講一下思路

1、和后臺小哥哥溝通好數據，把我們前端配置的路由表數據給他，他就能看懂了

2、拿到數據需要我們自己再處理

路由中的component后臺是給不了的，這里我們只需要后臺小哥哥按照我們提供的前端component路徑給數據，我們循環加載就可以了

//view就是后臺給的數據return () => import(`@/view/modules/${view}`);

這樣我們就拿到了最重要的數據，即component。

3、把后臺提供的數據處理成我們需要的路由表4、添加到路由中

Router.addRoutes(路由數據)

以下講一下我在項目中實現過程

1、新建一個router.js

里面做些基本的路由操作，比如導入包，因為我們拿到數據之后還是要自己手動去放到路由中去的也會寫一寫不需要后臺提供的菜單數據，比如我們測試頁面或者login等等

import Vue from 'vue';import Router from 'vue-router';import AppMain from '@/view/modules/main/index';Vue.use(Router);export const _CONSTANTS_ROUTERS =[ { path: '/login', component: () => import('@/view/modules/login/index'), hidden: true }, { path: '', component: AppMain, redirect: '/dashboard', children: [ {path: '/dashboard',component: () => import('@/view/modules/dashboard/index'),name: 'Dashboard',meta: { title: '首頁', icon: 'dashboard', noCache: true } } ] }];export default new Router({ mode: 'history', // 解決vue框架頁面跳轉有白色不可追蹤色塊的bug scrollBehavior: () => ({ x: 0, y: 0 }), // scrollBehavior: () => ({ y: 0 }), routes: _CONSTANTS_ROUTERS});

基本路由表已經建立好了

2、我們在什么時候進行獲取完整的路由表數據

這個時候我們就要想到路由鉤子函數，當然是Router.beforeEach中做

Router.beforeEach((to, from, next) =>{ NProgress.start(); if (!Token.isEmpty()) { if (to.path === '/login') { next({ path: '/' }); NProgress.done(); } else if (to.path === '/404') { next(); NProgress.done(); } else { // 判斷當前用戶是否已拉取完角色信息 if (Store.getters.roles.length === 0) { //拉取路由數據ACLRepo.listMenuTreeOfCurrentUser().then(response => { Store.dispatch('generateRoutes', response).then(() => { // 根據roles權限生成可訪問的路由表 Router.addRoutes(Store.getters.addRouters); // 動態添加可訪問路由表 next({ ...to, replace: true }); // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record }); }); } else { next(); } } } else { next(); }});

3、路由數據重新封裝

generateRoutes

import { _CONSTANTS_ROUTERS } from '@/scripts/router';import AppMain from '@/view/modules/main/index';const _PERMISSION = { state: { routers: _CONSTANTS_ROUTERS, addRouters: [] }, mutations: { setRouters: (state, routers) => { state.addRouters = routers; //和已經存在的路由表拼接 state.routers = _CONSTANTS_ROUTERS.concat(routers); } }, actions: { generateRoutes({ commit }, response) { let asyncRouters = filterAsyncRouter(response); asyncRouters.push({ path: '*', redirect: '/404', hidden: true }); commit('setRouters', asyncRouters); } }}; function filterAsyncRouter(routers){ // 遍歷后臺傳來的路由字符串，轉換為組件對象 let accessedRouters = routers.filter(router => { if (router.meta) { // 默認圖標處理 router.meta.icon = router.meta.icon ? router.meta.icon : 'component'; } if (router.component === 'main') { // Main組件特殊處理 router.component = AppMain; } else { //處理組件---重點 router.component = loadView(router.component); } //存在子集 if (router.children && router.children.length) { router.children = filterAsyncRouter(router.children); } return true; }); return accessedRouters;}function loadView(view){ // 路由懶加載 return () => import(`@/view/modules/${view}`);}export default _PERMISSION;

到這里其實就完成了，理清楚思路，其實很簡單

以上就是vue 實現動態路由的方法的詳細內容，更多關于vue 實現動態路由的資料請關注好吧啦網其它相關文章！