vue 動態新增的路由頁面重新整理時失效的原因及解決方案
問題描述
昨天在做vue後臺管理系統有關許可權頁面動態新增到路由的功能時,遇到一個問題:動態新增的路由頁面,在頁面重新整理時出現了404的情況。
場景
後臺管理系統的許可權控制是通過在前端頁面定義許可權code, 把code給後臺同學儲存配置到表中,之後根據後臺返回的許可權code列表與前端頁面配置的code選單列表做篩選匹配,code相等的頁面就是有許可權的頁面,再通過router.addRoute()動態新增到路由中,有許可權的路由才http://www.cppcns.com可以被訪問,否則會提示無許可權。
固定路由一開始就會放在new Router中,比如登入頁面login
介面返回
前端選單定義
vuex中的方法
出現的問題
登入後,通過呼叫vuex中的方法,完成獲取許可權code,動態篩選許可權路由頁面操作,然後通過router.addRoute()將有許可權選單新增到路由中,進入動態新增的路由頁面,重新整理頁面出現404
原因分析
頁面重新整理時,路由重新初始化,動態新增的路由此時已不存在,只有一些程式設計客棧固定路由(比如登入頁面)還在,所以出現了404的情況
解決方案
VUEX store中儲存的資料會在頁面重新整理時清空。
在路由的全域性導航router.beforeEach處做個判斷,根據VUEX中存放的list是否有值來判斷頁面是否是重新整理,如果不為0,則是第一次登陸,登入後會走匹配路由的方法,不會有問題;如果list.length為0,就為重新整理頁面,需要重新執行路由匹配,重新新增動態路由即可。
實現程式碼 route/index.js的導航守衛中新增邏輯判斷
———router.js————-
const constantRoutes = [ { http://www.cppcns.com path: '/',redirect: '/login' },{ path: '/login',name: 'login',meta: { auth: false },component: () => import('@/views/login') },{ path: '/layout',name: 'layout',meta: { auth: true },component: () => import('@/views/layout/index'),children: [ { path: '/index',name: 'index',component: () => import('@/views/home') } ] },{ path: '*',component: () => import('@/views/error/404') } ] Vue.use(VueRouter) const createRouter = () => new VueRouter({ routes: constantRoutes }) export function resetRouter() { const newRoutwww.cppcns.comer = createRouter() router.matcher = newRouter.matcher // reset router } const router = createRouter() //頁面重新整理後重新設定許可權頁面動態路由,防止出現動態路由404問題 const reSetPermissionList = to => { return new Promise((resolve,reject) => { if (to.path !== '/login' && store.state.permission.permissionList.length === 0) { store .dispatch('permission/getPermissionList') .then(() => { resolve('permCode') }) .catch(error => { resolve('permCode') }) } else { resolve() } }) } router.beforeEach((to,from,next) => { const accessToken = localStorage.getItem('accessToken') if (_.isEmpty(accessToken)) {//是否已經登入 否 去登陸頁面 next({ path: '/login',query: { redirect: to.fullPath } }) } else { //已登入使用者進入頁面 if (to.path === '/login') { next({ path: '/index' }) } else { reSetPermissionList(to).then(data => { data === 'permCode' ? next({ path: to.path,query: to.query }) : next() }) } } })
總結
主要通過在全域性導航處判斷VUEX中的資料是否存在,判斷頁面是否重新整理,是的話重新走一遍許可權路由匹配的方法。
以上就是vue動態新增的路由頁面重新整理時失效的原因及解決方案的詳細內容,更多關於vue 路由頁BsxsN面重新整理的資料請關注我們其它相關文章!