Question

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

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

它不起作用。

我尝试在here

上仍无法使用的深层使用

查看代码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 对象。因为随着路由器链接的更改，组件将被破坏并且新组件正在安装。因此，组件的观察者被破坏了。在您注入 router 对象的根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();
        }
      }
    },

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

在vue js上观看路由对象

3 个答案: