在vue js上观看路由对象

Question

如何在vue js上观看路由对象？这是我的代码

watch: { 
     '$route.params.search': function(search) {
           console.log(search)
      }
}

没用

我尝试使用深度仍然无法在这里工作

查看代码sanbox，您可以在main.js上观看route对象。

您不应该在任何其他组件内监视route对象。因为当路由器链接更改时组件会被破坏。您应该根据目录结构在main.js文件中执行此操作

谢谢@santanu和@ittus

Answer 1

您尝试过deep选项吗？

watch: { 
     '$route.params.search': {
        handler: function(search) {
           console.log(search)
        },
        deep: true,
        immediate: true
      }
}

Answer 2

在我的代码中，我确实喜欢以下内容-

watch:{
    '$route' (to, from){
        // Put your logic here...
    }
},

不要在任何其他组件内注意$ route对象。因为随着路由器链接的更改，组件将被破坏并且新组件正在安装。因此，组件的观察者被破坏了。在注入路由器对象的根Vue实例中观察$ route对象。如下所示-

const app = new Vue({
    router,
    watch:{
        '$route' (to, from){
           // Code
        }
    }
}).$mount('#element');

Answer 3

我在反应性、使用路由器链路动态更改路由方面遇到了麻烦。

问题是路线会改变，但从 data() 返回的方法获取的 siteData 却没有改变：

我必须像这样观察路线：

    watch: {
      '$route' (to, from) {
        if(to !== from ) {
          this.siteData = this.getSiteData();
        }
      }
    },

希望这可以帮助其他人解决这个问题

Answer 4

简单使用：

watch: {
    "$route.params.search"(value) {
      //Your code here
    }
  }