VueJS 2中的Watch route对象

eivgtgni 于 2023-05-23 发布在 Vue.js

关注(0)|答案(4)|浏览(334)

如何在VueJS 2上查看路由对象？这是我的密码

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

这不管用
我尝试使用deep仍然无法在here上工作
查看代码沙箱，您可以在main.js上查看路由对象。
您不应在任何其他组件中查看路由对象。因为当路由器链路改变时，组件会被破坏。您应该根据目录结构在main.js文件中执行此操作
感谢@santanu和@ittus

4条答案

你试过deep选项吗？

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

在我的代码中，我做了如下的事情-

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

不要在其他组件中注意**$route对象。因为当路由器链路发生变化时，组件会被破坏，而新组件会被挂载。所以组件的监视器被摧毁了。注意注入router对象的Vue根示例中的$route**对象。就像下面这样--

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

简单用途：

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

我在React方面遇到了麻烦，用路由器链接动态改变路由。
问题是路由会改变，但我从data（）返回的方法中获取的siteData不是：
我不得不这样看着路线：

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

希望这对其他人有帮助