解决动态添加的路由页面刷新空白问题

最新推荐文章于 2024-07-29 19:44:46 发布

12岁零120个月的孩子

最新推荐文章于 2024-07-29 19:44:46 发布

阅读量985

点赞数

分类专栏： vue-router 文章标签： vue

本文链接：https://blog.csdn.net/qq_39874538/article/details/112893131

版权

vue-router 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客记录了作者首次手动搭建项目的过程，遇到的问题以及解决方案。主要涉及动态页面刷新时可能出现的空白问题，通过axios获取并处理'permission.json'数据，结合Vuex和Vue Router实现动态路由加载，确保非动态页面进入时导航栏数据正确渲染。

摘要由CSDN通过智能技术生成

今天这个项目全部由本人手搭的，之前都是直接用已经搭建好了的项目。导致有很多细节问题我不知道，自己也遇见过，相当于是理论大于实际。

if (to.matched.length === 0) {  // 配合下面的next({ ...to, replace: true })解决动态页面刷新时空白
      axios.get('static/permission.json')
        .then(res => {
          console.log(eval(res.data))
          store.dispatch('GenerateRoutes', eval(res.data))
            .then(() => {
              console.log(store.getters.permission_routers, 'store.getters.permission_routers')
              if (store.getters.perms.length === 0) {
                router.addRoutes(store.getters.permission_routers)
                next({ ...to, replace: true })
              }
            })
        })
    } else {
      //  解决非动态页面进来，首页左侧导航栏数据不渲染
      axios.get('static/permission.json')
        .then(res => {
          console.log(eval(res.data))
          store.dispatch('GenerateRoutes', eval(res.data))
            .then(() => {
              console.log(store.getters.permission_routers, 'store.getters.permission_routers')
              if (store.getters.perms.length === 0) {
                // router.addRoutes(store.getters.permission_routers)
                next()
              }
            })
        })
    }