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

在Vue JS上监视路由对象

  •  1
  • Komang Suryadana  · 技术社区  · 7 年前

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

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

    它不起作用。

    我试着用深仍然不工作 here

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

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

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

    3 回复  |  直到 7 年前
        1
  •  11
  •   ittus    7 年前

    你试过吗? deep 选择权?

    watch: { 
         '$route.params.search': {
            handler: function(search) {
               console.log(search)
            },
            deep: true,
            immediate: true
          }
    }
    
        2
  •  6
  •   santanu bera    7 年前

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

    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    6 年前

    简单使用:

    watch: {
        "$route.params.search"(value) {
          //Your code here
        }
      }
        4
  •  0
  •   Sweet Chilly Philly    6 年前

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

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

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

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

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