vue动态路由刷新丢失解决方案

最新推荐文章于 2025-04-09 20:02:16 发布

原创最新推荐文章于 2025-04-09 20:02:16 发布 · 9.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了解决Vue.js中动态路由刷新导致空白页或404错误的方法。通过使用本地存储结合Vuex来记录和判断页面刷新状态，并提供具体的代码实现方案。

问题出现的问题

动态路由添加刷新页面出现空白页面或者404页面

因为界面刷新导致动态路由丢失，所以是空页面或者404

我添加动态路由了怎么还剩刷新依旧是空白页面呢？

因为动态路由添加后需要是新导航才会生效

解决方案

需要判断当前页面是否刷新了

本地存一个当前访问页面的路由下次刷新用来判断当前是否是页面刷新
使用vuex来存储动态路由数据，如果是空就是刷新页面了

案例

使用本地存储使用路由拦截器跳转之后存数据

//存访问路由
router.afterEach((to, from) => {
  localStorage.setItem("new",to.path)
  })
//处理动态路由
router.beforeEach((to, from, next) => {
 if(localStorage.getItem('new')){
        var path: any = localStorage.getItem('new')
        if (path == to.path) { //动态路由页面的刷新事件
          // localStorage.removeItem('new')
          store.commit('setBaseRouters')
          router.replace({...to});
        }
      }
})

vuex处理更简单需要添加路由拦截进行逻辑处理

router.beforeEach((to, from, next) => {
  store.commit('loginModule/isLogin')
  const isloginPage: boolean = getFilterRouterName((to.name as string));
  let state: any = store.state
  if (isloginPage || state.loginModule.isLogin) {
    if (state.baseRouters.length==0) {
      store.commit('setBaseRouters')
      router.replace({...to});
    }
    next()
  }
  else {
    next({ name: LOGIN })
  }
  if (to.matched.length === 0) {
    // ElMessage.warning("当前路由不存在");
    /**
     * user_type ：customer
      user_type :  supplier
     */
      //只有登录了才进入这个逻辑判断
      if(state.loginModule.isLogin){
        if(localStorage.getItem('userinfo')){
                let data = JSON.parse(localStorage.getItem('userinfo'))
        if (data.user_type == 'customer') {
        //这里处理如果访问项目根路径访问的
          if (to.path == '/admin/') {
            router.replace(import.meta.env.VITE_BASE + "/***");
          }
        } else {
          next({ name: PRODUCT })
        }
        }
    
      }
    
  }
})