代码之家 › 专栏 › 技术社区 › Komang Suryadana

在Vue JS上监视路由对象

watch vue.js

1

Komang Suryadana · 技术社区 · 8 年前

如何在Vue JS上监视路由对象?这是我的密码

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

它不起作用。

我试着用深仍然不工作 here

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

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

谢谢“桑塔努”和“伊图斯”

3 回复 | 直到 8 年前

1

11

ittus 8 年前

你试过吗? deep 选择权?

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

2

6

santanu bera 8 年前

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

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

别担心 美元路线 任何其他组件中的对象。因为当路由器链路改变时,组件会被破坏,新的组件也会被挂载。所以组件的监视程序被破坏了。注意 美元路线 在根Vue实例中注入 路由器 对象。如下所示--

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

3

0

Nuno Ribeiro 7 年前

简单使用:

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

4

0

Sweet Chilly Philly 7 年前

我在反应性方面遇到了问题,用路由器链接动态地改变路由。

问题是路由将更改,但从data()返回的方法获取的sitedata不是:

我不得不这样看着这条路线:

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

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