在 vue js 上观看路由对象

Question

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

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

它不起作用。

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

查看代码 sanbox，您可以查看 main.js 上的路由对象。

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

谢谢@santanu 和@ittus

原文由 Komang Suryadana 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您是否尝试 deep 选项？

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

原文由 ittus 发布，翻译遵循 CC BY-SA 4.0 许可协议

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');

原文由 santanu bera 发布，翻译遵循 CC BY-SA 4.0 许可协议