最近在做项目时遇到了一个问题，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给我们提供的监听方法，虽然页面上不要使用太多，但是我认为这个方法总比延迟要好很多，这是我目前最佳方案，有小伙伴有更好的方案，要及时通知我喔