很多時(shí)候我們?cè)陧?xiàng)目的路由都是在前端配置好的但是有的時(shí)候?yàn)榱诉M(jìn)行全面的權(quán)限控制，會(huì)需要后臺(tái)給出路由表，前端再渲染。不用在前端配置。

下面主要講一下思路

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

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

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

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

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

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

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

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

1、新建一個(gè)router.js

里面做些基本的路由操作，比如導(dǎo)入包，因?yàn)槲覀兡玫綌?shù)據(jù)之后還是要自己手動(dòng)去放到路由中去的也會(huì)寫一寫不需要后臺(tái)提供的菜單數(shù)據(jù)，比如我們測(cè)試頁面或者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、我們?cè)谑裁磿r(shí)候進(jìn)行獲取完整的路由表數(shù)據(jù)

這個(gè)時(shí)候我們就要想到路由鉤子函數(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); // 動(dòng)態(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){ // 遍歷后臺(tái)傳來的路由字符串，轉(zhuǎn)換為組件對(duì)象 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 { //處理組件---重點(diǎn) 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;

到這里其實(shí)就完成了，理清楚思路，其實(shí)很簡(jiǎn)單

以上就是vue 實(shí)現(xiàn)動(dòng)態(tài)路由的方法的詳細(xì)內(nèi)容，更多關(guān)于vue 實(shí)現(xiàn)動(dòng)態(tài)路由的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！