php - vue-router中動態新增路由問題

Question

簡述

最近在研究前後台分離下基於RBAC的權限控制問題,在使用vue-router動態添加路由的時候,出現一個小問題,需要請教下各位.

大概思路如下:

• 後台使用者登入成功以後,從服務端取得該使用者對應的權限清單,並存入sessionStorage中

• 將使用者重新導向到後台首頁

• 在router.beforeEach()鉤子中,將sessionStorage中的權限列表資料讀入,並調用router.addRoutes()動態新增路由.

代碼

    router.beforeEach(to, from, next)
    {
        ...
        let permission = JSON.parse(window.sessionStorage.getItem('permission'))
        /*permission = [...{"client_route":"/test"}...]*/
        if (permission) {
            let newRoutes = []
            permission.map((item, index) => {
                newRoutes.push({
                    path:'${item.client_route}', 
                    component: '../view${item.client_route.slice(1)}.vue',
                    meta:{Auth:true}
                })
            })
            router.addRoutes(newRoutes)
        }
        ...
    }

問題來啦

1. 思路是否有問題?

2. 上面的程式碼有問題,path和component這裡的${}不知道該怎麼處理.原諒我es6學的不好.╮(︶﹏︶")╭.我的本意是根據返回來的路由名稱去載入.vue檔案

謝謝各位

Answer 1

es6裡面用${}外面是反引號``，你的是单引号''，所以賦值失敗