利用addRoutes添加动态路由，刷新页面跳转404或者空白页 |
您所在的位置：网站首页 › 路由表跳转 › 利用addRoutes添加动态路由，刷新页面跳转404或者空白页 |
|
刷新页面时跳转404或者空白页，我的原因是刷新页面后动态添加的路由表信息丢失，我在获取到后存在了sessionStorage中，但在刷新后还是丢失， 解决办法：在判断页面是刷新时，重新拉取数据 路由表信息 path: '/Dep', name: 'Dep', icon: 'el-icon-location', component: Layout, redirect: '/department', meta: { requireAuth: true, showMenu: true, title: '部门管理', }, children: [{ path: '/department', name: 'Department', icon: 'el-icon-s-promotion', component: () => import('@/views/personnel/department.vue'), meta: { requireAuth: true, showMenu: true, title: '部门管理', } }] },路由 router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 requireAuth参数必须存在 if (sessionStorage.getItem("token")) { // 判断本地是否存在token //已登录 有token 放行 //这里判断是否拉取了菜单，如果没有这一步，控制台会一直报路由重复，按理说这里应该是根据后台返回值来判断，但我这里貌似没看到，就自己在vuex中存了一组数据，isDept ：false； if(store.state.isDept == true ){ next(); return }//等于true就说明拉取了菜单 //利用vuex中的方法，处理后台传过来的数据，拼接成标准路由格式 store. dispatch("getDynamicRouter",JSON.parse(sessionStorage.getItem('permissionList'))) .then(res => { //进行路由拼接，并进行路由动态加入 ！！注意addroutes方法不可缺 store.dispatch("getDiyRouter").then(res => { //动态添加路由 router.addRoutes(store.state.routeList) //添加完成后，让.isDept变成true，说明拉取了菜单，再进行页面跳转时就不会重新拉取路由列表了， store.state.isDept = true; //添加完成后，一定要进行next()，不然会进行死循环 next() }); }); } else { // 未登录,跳转到登陆页面 next({ path: '/login' }) } } else { //无需登录权限页面控制 if (to.name == null) { //这里是页面刷新的时候，重新拉取路由数据，方法同上 if (window.performance.navigation.type == 1) { if(store.state.isDept == true){ next(); return } store.dispatch("getDynamicRouter", JSON.parse(sessionStorage.getItem('permissionList'))) .then(res => { store.dispatch("getDiyRouter").then(res => { store.state.isDept = true; router.addRoutes(store.state.routeList) //唯一的区别在这里， next({...to, replace: true}) }); }); } else { next({ path: '/404' }) } } else { next(); } } }); |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |