vue-router addrouters 刷新导致页面空白或404 解决方案
vue-router动态路由加载会遇到一些问题,最严重的问题是刷新动态路由页面导致404,网上查了不少资料,都有点问题,解决了一下,附代码及解决思路。1、使用动态路由时需要一个全局变量,用来控制什么时候加载这个动态路由,我用的是vuex全局状态集管理,用他有个好处就是,刷新时路由信息会丢失,vuex状态也会丢失,所以根据他的状态来判断比较好,设置一个初始值 , 默认false,等动态路由加载完..
·
vue-router动态路由加载会遇到一些问题,最严重的问题是刷新动态路由页面导致404,网上查了不少资料,都有点问题,解决了一下,附代码及解决思路。
1、使用动态路由时需要一个全局变量,用来控制什么时候加载这个动态路由,我用的是vuex全局状态集管理,用他有个好处就是,刷新时路由信息会丢失,vuex状态也会丢失,所以根据他的状态来判断比较好,设置一个初始值 , 默认false,等动态路由加载完就把这个状态改成true.
2、在beforeEach 里面拦截处理逻辑。
3、动态路由判断时一定要注意,不能重复加载,否则会死循环。
4、刷新时最主要的代码是next 的时候把to 传进去,不然怎么弄在动态页面刷新也是空白或404,其他的记住不要死循环就行了。
核心代码如下:
let routerUpdate = function(to, from, next){ let dynamicRouter = store.getters.getDynamicRouter; if(!dynamicRouter){// 更新路由 router.addRoutes(dynamicRoutingList) router.options.routes.push(dynamicRoutingList) store.commit('SET_DYNAMIC_ROUTER',true); if(from.name==null){ next(to) }else{ next() } }else{ console.log(dynamicRouter); next() } } router.beforeEach((to, from, next) => {
Vue.$vux.loading.show(); let token = localStorage.getItem('token'); if(!to.meta.noToken){ if(!token){ console.log('无登录信息') router.push({path:'/login'}) }else { routerUpdate(to, from, next) } }else{ if(!token){ next(); }else { routerUpdate(to, from, next) } } }); router.afterEach(function (to) {Vue.$vux.loading.hide(); });
更多推荐
已为社区贡献13条内容
所有评论(0)