Vue-cli watch监听$route失效

在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
                    }
                })
            }
        }
    }

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

回答:

在route中设置children动态路由

回答:

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

回答:

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

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

回答:

可以试试添加immediate: true

回答:

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

回答:

试试看 deep:true

回答:

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

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

})

回答:

`

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()这种方式也不行。。。)

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注