router.beforeEach((to, from, next) => {
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
} else {
if (!store.getters.name) {
// 模拟一个请求
setTimeout(() => {
// 请求返回的路由数据
let divRouter = [
{
path: '/example',
component: 'Layout',
redirect: '/example/table',
name: 'Example',
meta: { title: '举个栗子', icon: 'el-icon-s-help' },
redirect: 'noRedirect',
children: [
{
path: 'table',
name: 'Table',
component: () => import('@/views/table/index'),
meta: { title: 'Table222', icon: 'table' }
},
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/tree/index'),
meta: { title: 'Tree', icon: 'tree' }
}
]
},
]
// 处理组件'Layout'引用
divRouter.forEach(item => {
if (item.component && item.component === 'Layout') {
item.component = Layout
}
})
// 至关重要，单使用addRoutes添加路由不会生效，具体原因不清楚。
router.options.routes.push(...divRouter);
router.addRoutes(divRouter)
// 模拟用户信息返回接口
store.commit('user/SET_NAME', '晨淘淘')
/*
添加路由后需要重定向 确保addRoutes已完成
beforeEach中使用addRoutes是无法添加的,因为这是访问路由之前的钩子,
addRoutes过后重定向到访问的页面
*/
next({ ...to, replace: true })
}, 500)
} else {
next()
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next()
NProgress.done()
}
}
})
用的vue-admin-template模板代码。
