vue動態掛載路由

2021-09-27 11:26:27 字數 2498 閱讀 6218

後台管理系統中根據使用者許可權顯示不同選單是很基礎的需求，使用vue開發通常我們是遍歷路由（this.$router.options.routes)生成使用者選單，vue中提供了addrouter()方法用於動態掛載路由，我們可以根據使用者許可權結合該方法實現使用者路由動態生成。**如下：

（1） router.js：該檔案中初始化乙個vuerouter物件，並掛載一些無需許可權校驗即可訪問的路由：

import vue from 'vue'


import router from 'vue-router'


vue.use(router)


/* layout */


import layout from '@/layout'


/** * 初始化路由（無需許可權）


*/export const constantroutes = [


,  ,}]


}]// 定義乙個函式來建立router


export const createrouter = routes => new router()


const router = createrouter(constantroutes)


/** * 路由重置，防止router未初始化導致重複掛載


*/export function resetrouter() 


export default router
（2） dynamicroutes.js：該檔案中定義需要根據使用者許可權動態掛載顯示的路由：

import layout from '@/layout'


/** * 動態路由，需要根據使用者許可權動態掛載


*/const dynamicroutes = [


,    children: [


},},}]


},]export default dynamicroutes
（3）permission.js：該檔案用於路由跳轉前的許可權校驗，如：token校驗、獲取使用者資訊生成使用者動態選單等

import router from './router'


import dynamicroutes from './router/dynamicroutes'


import store from './store'


import  from 'element-ui'


import nprogress from 'nprogress' // progress bar


import 'nprogress/nprogress.css' // progress bar style


import  from '@/utils/auth' // get token from cookie


import getpagetitle from '@/utils/get-page-title'


import layout from '@/layout/index'


nprogress.configure() // nprogress configuration


const whitelist = ['/login'] // no redirect whitelist


/** * 根據使用者許可權生成路由


* @param dynamicroutes 動態路由表


* @param permissions 使用者許可權


*/export function generatemenu(dynamicroutes, permissions) 


routers.push(route)}})


return routers;


}router.beforeeach(async(to, from, next) => )


nprogress.done()


} else  else )


// addrouter是讓掛載的路由生效，但是掛載後'router.options.routes'並未重新整理(八成是個bug)，所以還需要手動將路由加入'router.options.routes'


router.addroutes(routers)


router.options.routes = constantrouters


next()


})} catch (error) `)


nprogress.done()}}


}} else  else `)


nprogress.done()


}}})


router.aftereach(() => )
易錯點總結：

（1）動態掛載路由時addrouter不會導致』router.options.routes』的重新整理，需要我們手動將生成的路由列表設定到router.options.routes中；

（2）/404路由必須放在路由表的最後。

vue 動態路由

因為去官方看英文文件 對例子探索了下 所以 自己也寫了乙個簡單的demo body div id h1 hello h1 p router link to go to foo router link 繫結路由和動態引數 router link to bar 3 go to bar router li...

vue動態路由

addroutes新增的動態頁面重新整理後進入404頁面解決方案 起因因為某個功能的上線與否由後台介面決定，而這個功能可能不止乙個頁面，我們希望每次使用者開啟頁面前，都能呼叫這一介面確定這個功能是否已經啟用，若啟用則直接開啟相關頁面，若未啟用則不顯示相關頁面，直接跳轉入404萬用字元設定的頁面。很顯...

vue動態路由匹配

我們經常需要把某種模式匹配到的所有路由，全都對映到同個元件。例如，我們有乙個user元件，對於所有 id 各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在vue router的路由路徑中使用動態路徑引數來達到這個效果 這是公共的元件 dynamicroutedemo.vue 我是公共的元件...