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

下面主要講一下思路

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

2、拿到數(shù)據(jù)需要我們自己再處理

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

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

這樣我們就拿到了最重要的數(shù)據(jù)，即component。

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

Router.addRoutes(路由數(shù)據(jù))

以下講一下我在項目中實現(xiàn)過程

1、新建一個router.js

里面做些基本的路由操作，比如導(dǎo)入包，因為我們拿到數(shù)據(jù)之后還是要自己手動去放到路由中去的也會寫一寫不需要后臺提供的菜單數(shù)據(jù)，比如我們測試頁面或者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框架頁面跳轉(zhuǎn)有白色不可追蹤色塊的bug scrollBehavior: () => ({ x: 0, y: 0 }), // scrollBehavior: () => ({ y: 0 }), routes: _CONSTANTS_ROUTERS});

基本路由表已經(jīng)建立好了

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

這個時候我們就要想到路由鉤子函數(shù)，當(dāng)然是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 { // 判斷當(dāng)前用戶是否已拉取完角色信息 if (Store.getters.roles.length === 0) { //拉取路由數(shù)據(jù)ACLRepo.listMenuTreeOfCurrentUser().then(response => { Store.dispatch('generateRoutes', response).then(() => { // 根據(jù)roles權(quán)限生成可訪問的路由表 Router.addRoutes(Store.getters.addRouters); // 動態(tài)添加可訪問路由表 next({ ...to, replace: true }); // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record }); }); } else { next(); } } } else { next(); }});

3、路由數(shù)據(jù)重新封裝

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; //和已經(jīng)存在的路由表拼接 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){ // 遍歷后臺傳來的路由字符串，轉(zhuǎn)換為組件對象 let accessedRouters = routers.filter(router => { if (router.meta) { // 默認(rèn)圖標(biāo)處理 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 實現(xiàn)動態(tài)路由的方法的詳細(xì)內(nèi)容，更多關(guān)于vue 實現(xiàn)動態(tài)路由的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！