Vue-cli watch监听$route失效

Question

在vue-cli的子组件里 使用watch方法监听路由变化,代码如下:

watch: {
        $route(to) {
            console.log(to)
            if (to.path.indexOf('index') != -1) {
                //路由变化后重新获取帖子列表
                this.$http.get('/api/communityList').then((res) => {
                    if (res.data.errCode === 0) {
                        let getRes = res.data.data.hotList
                        this.postList = getRes
                    }
                })
            }
        }
    }

然后在页面上查看的时候,不管路由怎么变化,就是没有东西输出,而我另外一个项目里,也是这么写的监听,却能够输出路由信息的,这是因为什么?

Answer 1

在route中设置children动态路由

Answer 2

// $route 需要用单引号'引起来
watch: {
  '$route' (to, from) {
    console.log(to)
  }
}

Answer 3

响应路由参数的变化
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
我也弄了很久没出来，我没理解错的话因为APP.vue里用了子路由所以可以监控到变化，在单个组件里你们和我一样那个页面没有使用子路由，所以在那个页面$route监控不会生效，不对的话欢迎纠正

Answer 4

可以试试添加immediate: true

Answer 5

楼主搞定了吗，我也有这样的问题

Answer 6

试试看 deep:true

Answer 7

应该this问题，路由变化的时候新的组件还没有被创建。
next(vm => {

// 通过 `vm` 访问组件实例

})

Answer 8

`

methods: {
    change(){
        this.$route.params.data1 = 1;
        // 下面这种手动set的方式也不能触发watch对$route的监听
        // this.$set(this.$route.params, data1, 1);
    }
},
watch: {
    $route: {
      handler(newName, oldName) {
        console.log('$route has changed');
      },
      deep: true
}  

`
当触发change事件时，在vue-tool中可以观测到data中的$route中的params数据确实是变化的，但是仍然watch不到$route的变化。请问这个什么个情况？（而且console出来看，$route确实没有__ob__属性，即使手动调用this.$set()这种方式也不行。。。）

Answer 9

楼主解决了吗，希望解决了一起分享下

Answer 10

楼主这个问题解决了么

Answer 11

这个问题我也遇到了，经过一番尝试，终于解决了。
我把这段代码放在了app.vue这个父组件里面，监听就可以成功了。
我也不知道是不是只能在父组件里面监听，在子组件里面监听不了，大家有知道的可以说一下，谢谢了