最近在做项目时遇到了一个问题,vue-router使用按需加载后无法获取$route信息了……,基于这个问题,我总结了三种解决方案,第一种就是监听路由【这种方案是最佳】,

第二种就是使用setTimeout延迟解决【不友好】,

第三种就是不使用按需加载路由【当然如果路由不是很多的话,可以不使用按需加载路由,但是我们既然使用按需加载,就是有很大的好处的】

打个比方说,我想要手动刷新当前页面或者在当前页面,进入下一个路由cid.vue,在app.vue获取到的$route.path始终都是'/',当然这并不是我想要的,我想要的是$route.path的值为'/cid'

百度搜了一下,又是一大堆没有用的,于是尝试加了个settimeout延迟,这下拿到了,原因是由于我们使用的是按需加载路由,在我们即将跳转时,路由并没有加载完成,所以我们是拿不到$route.path的值的,由于我们配置的router.js,如果找不到就默认跳转'/',这个配置还是很简单的,百度还是能找到答案的,算了,我还是贴一下吧,有些小伙伴还是比较懒得……

{ path: '*', redirect: '/home', hidden: true }

这段路由加到整个路由的下面也就是最外层

下面先说一下加了延迟的方法吧,总的来说虽然解决了问题,但是这种方法绝对不是我想要的,因为这个延迟还是很不友好的……

代码看一下吧:

mounted() {
         this.getUserInfo();
         let _this=this//即便下面是箭头函数,如果this拿不到还是要保存一下的
        // 通过延迟方法实现按需加载路由异步获取并拿到即将跳转的路由
         setTimeout(() => { 
            _this.$router.push({
                 path: _this.$route.path,//我们要拿到的就是这个path
                 query: {
                      uid: _this.$cookies.get("userToken"),
                      userRate: _this.$cookies.get("userRate") || _this.GLOBAL.Rate
                      }
              });
         }, 1000);

    },

 这种方式显然是不太友好的

那么接下来我就说一下我的解决方案吧,其实很简单,在app.vue的watch里面监听路由变化,然后完成我们的逻辑,

这样我们是百分之百能拿到$route.path的值,不会反回'/',废话不多说了,代码贴上

watch: {
        // 按需加载路由,监听路由变化逻辑处理
        $route(to, from) {
            let _this=this//这里注意一下记得缓存this
            console.log(to, "路由改变body");
            _this.$router.push({
                path: _this.$route.path,//这个值我们是可以拿到的
                    query: {
                      id: _this.$cookies.get("id")
                 }
           });
        }
    },

watch是vue给我们提供的监听方法,虽然页面上不要使用太多,但是我认为这个方法总比延迟要好很多,这是我目前最佳方案,有小伙伴有更好的方案,要及时通知我喔

Logo

前往低代码交流专区

更多推荐