vue-element-admin
vue-element-admin copied to clipboard
router.addRoutes 无效
Question(提问)
基于vue-admin-template,使用router.addRoutes动态加载菜单,查看控制台,无报错信息,console.info打印菜单有数据。但是左侧菜单栏没有动态变更。
请问怎么解决? 谢过......
Steps to reproduce(问题复现步骤)
Screenshot or Gif(截图或动态图)
Link to minimal reproduction(最小可在线还原demo)
router.beforeEach:
router.beforeEach(async(to, from, next) => {
NProgress.start()
document.title = getPageTitle(to.meta.title)
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
const hasGetUserInfo = store.getters.name
const menuList = store.getters.routes && store.getters.routes.length > 0
if (hasGetUserInfo && menuList) {
next()
} else {
try {
// 获取用户信息
await store.dispatch('user/getInfo')
// 动态菜单
const accessRoutes = await store.dispatch('permission/generateRoutes')
// 这里打印到控制台,是有数据的
console.info(accessRoutes)
router.addRoutes(accessRoutes)
next({ ...to, replace: true })
} catch (error) {
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
// 完成进度条
NProgress.done()
})
动态菜单测试代码:
import {constantRoutes } from '@/router'
import Layout from '@/layout'
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}
const actions = {
generateRoutes({ commit }) {
return new Promise(resolve => {
let accessedRoutes = formatRoutes
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
}
export const formatRoutes = [
{
path: '/ccc',
component: Layout,
children: [
{
path: 'ccc',
name: 'ccc',
component: () => import('@/views/form/index'),
meta: { title: 'ffff', icon: 'form' }
}
]
},
{ path: '*', redirect: '/404', hidden: true }
]
export default {
namespaced: true,
state,
mutations,
actions
}
Other relevant information(格外信息)
- Your OS: win10
- Node.js version: 10.15.0
- vue-element-admin version: 4.2.1