vue動態路由的實現

2021-10-07 11:06:10 字數 1446 閱讀 9509

路由動態渲染,即路由是變動的,由後端返回,故資料不是唯一不變的

實現方法:

route.index.js

需要許可權的頁面應該放在非同步路由裡面,登入頁、404頁等放在同步路由裡面,再拼接

實現過程

// 不需要許可權的頁面

export

const asyncroutes =[,

redirect:

"/accountmanger/usermanger"

, children:[}

,},}

,}]}

,];const

createrouter=(

)=>

newrouter()

, routes: constantroutes.

concat

(asyncroutes)})

;

permission.js

// menulist即是後端返回的許可權列表頁

const

=await store.

dispatch

("user/getinfo");

// getroutes方法使用者把後端返回的資料變成我們想要的路由格式

let menulists =

getroutes

(menulist)

;//permission為store中的檔案,generateroutes為permission中的方法

// permission方法用於把後端返回的許可權列表和我們本地寫好的路由位址匹配,如果本地路由在後端返回的許可權路由資料中存在,則顯示出來

const accessroutes =

await store.

dispatch

("permission/generateroutes"

, menulists)

;//路由新增

router.

addroutes

(accessroutes)

;next()

;

store/permission.js

const actions =

, roles));

}};//匹配

export

function

filterasyncroutes

(newroutes, routes, roles)

; roles.

foreach

(item =>

newroutes.

push

(tmp)

;return

false;}

})})

;}

VUE的動態路由

vue前端的動態路由實現 1 首先在router中配置動態路由的路徑 hidden true 2 觸發動態路由的方式,這裡選擇在 中,所傳入的引數為 的row.no,使用router link指定路由的頁面 no label 編碼 width 100px sortable custom viewde...

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萬用字元設定的頁面。很顯...