vue後台管理系統動態路由的實現

每個使用者登入後台管理系統看到的側邊欄，訪問的路由都不一樣

一般有兩種方法：第一種是前端寫死路由，如果使用者沒有這個路由許可權，就顯示你沒有訪問許可權，但這種看到側邊欄有這個模組但看不到就不太好，所以這裡講第二種方法

第二種是由後端傳動態路由給前端，具體實現如下：

第一步：

首先確定靜態路由，我單獨寫了乙個js檔案

const constantroutermap =[,
//登入模組
,    component:()
=>
import
('@/views/loginmodule/login/login.vue'),
},//註冊
,    component:()
=>
import
('@/views/loginmodule/register/register.vue'),
},//忘記密碼
,    component:()
=>
import
('@/views/loginmodule/forget/forget.vue'),
},,    component:()
=>
import
('@/views/loginmodule/scan/scan.vue'),
},//主體
]export
default constantroutermap

import vue from
'vue'
import vuerouter from
'vue-router'
import constantroutermap from
'./constantroutermap'
import lastrouter from
'./lastrouter'
vue.
use(vuerouter)
import nprogress from
'nprogress'
import
'nprogress/nprogress.css'
import store from
'.././store/index'
import main from
'../views/main/main.vue'
const router =
newvuerouter()
export
default router

import vuestorage from
'vue-ls'
vue.
use(vuestorage,
)

檔案

import axios from
'axios'
import vue from
'vue'
axios.defaults.timeout =
5000
axios.defaults.baseurl =
''//ip+埠號
axios.interceptors.request.
use(
(config)
=>
return config
},(err)
=>
)//封裝axios.get方法
function
get(url, params =))
.then
((response)
=>).
catch
((err)
=>)}
)}export
default

//使用axios.get方法

},

然後在router.index寫路由的守衛前置去拉取動態路由表

再lastrouter裡寫404頁面等

.js

//路由守衛，路由跳轉之前的鉤子
router.
beforeeach
((to,
from
, next)
=>
next()
if(!vue.ls.
get(
'token'))
else
}else
else)}
})router.
addroutes
(routesfilter)
router.
addroutes
(lastrouter)
next()
nprogress.
done()
})}else}}
})router.
aftereach((
)=>
)

//404要放在最後載入
const lastrouter =
[//使用者中心
,      component:()
=>
import
('@/views/user/user.vue'),
children:[,
//基本設定
,          component:()
=>
import
('@/views/user/setup/setup.vue'),
},//修改密碼
,          component:()
=>
import
('@/views/user/set-password/set-password.vue'),
},],
},//404頁面
,      component:()
=>
import
('@/views/404/404.vue'),
}]export
default lastrouter

vue後台管理系統，動態許可權路由怎麼寫。

做後台管理系統，我們經常需要對各個使用者進行許可權的管理，不同許可權的使用者所能看到的頁面也不相同，那麼我們應該怎麼做呢。下面，我說說我近期的實戰案例。寫路由這一步正常寫就行，沒什麼特別的地方 children redirect index test1 children 路由怎麼寫就不過多贅述了，相...

vue2後台動態路由

vue管理平台的動態路由 後台傳遞路由，前端拿到並生成側邊欄 前端的路由從後台獲取，包括許可權 大體步驟包括 路由攔截 鉤子函式 後台獲取路由資料 儲存到本地或vuex中.在router index.js中 1 router.beforeeach to,from,next 2 載入動態選單和路由 3...

vue 後台系統許可權管理

最近在做乙個後台管理系統，一般的後台系統都有許可權管理這塊，下面我就分享下我實現許可權管理這塊的思路。首先說下這個系統前端用到的技術棧，vue全家桶,element ui,axios。首先，使用者的許可權是通過前端來進行配置的，那麼就需要乙個頁面去進行使用者的許可權配置。在使用者登入之後，通過請求後...