component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
meta: {
title: '表单页'
}
},
{
path: '/pattern',
name: 'pattern',
component: () => import(/* webpackChunkName: "pattern" */ '@/views/DesignPattern.vue')
},
{
path: '/map',
name: 'map',
component: () => import(/* webpackChunkName: "map" */ '@/views/DataMap.vue'),
meta: {
title: '地图组件'
}
},
] },
{
path: '/user',
redirect: '/login',
component: UserLayout,
children: [
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ '@/views/user/Login.vue')
},
{
path: '/register',
name: 'register',
component: () => import(/* webpackChunkName: "login" */ '@/views/user/Register.vue')
}
] },
//需要注意这里，404的路由一定要写在静态路由中
{
path: '/404',
component: () => import(/* webpackChunkName: "not_found" */ '@/views/NotFound.vue')
}
]
export const asyncRouterMap = [
{
path: '/',
redirect: '/index',
component: BasicLayout,
children: [
{
path: '/controls',
name: 'controls',
component: () => import(/* webpackChunkName: "controls" */ '@/views/Controls.vue'),
meta: {
title: '权限设置',
permission: ['admin'] }
}
] },
//捕获未定义的路由配置
{
path: '*',
redirect: '/404',
hidden: true
}
]
上面关于404页面的定义顺序非常重要，如果在静态路由中定义了捕获的路由path:”*”，而在动态路由中定义了404路由的话，则当导航钩子中判断比较复杂的话，会出现一些意想不到的错误，我就是当时写反了顺序，并且还在导航钩子中做了一些复杂的面包屑的判断，一旦刷新页面的话，则会出现以下错误
这种错误的产生，可能是因为刷新时，导航钩子发现动态添加进来的路由找不到一直进行获取动态路由的方法，导致最后调用栈溢出所导致，因此大家在使用的时候一定要非常小心。
4. 当我们生成路由后，退出应用的切换新的角色账号进行登录时，一定要记得的两件事，第一就是清空vuex里面的角色信息，在不刷新的情况下，这些信息是不会丢失的，当不同角色的账号登录时，原来的角色依然存在，那么肯定会出现问题，其次则是在跳转会登录页的时候，需要设置刷新页面的代码
window.location.reload();
this.$router.push({name: 'login'});
