vue動態掛載路由

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

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

import layout from '@/layout'

/** * 動態路由，需要根據使用者許可權動態掛載
*/const dynamicroutes = [
, children: [
},},}]
},]export default dynamicroutes

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 我是公共的元件...