在 vue js 上观看路由对象

Posted 2023-03-11

【中文标题】在 vue js 上观看路由对象

【英文标题】：Watch route object on vue js

【发布时间】：2018-12-01 12:36:49

【问题描述】：

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

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

它不起作用。

我尝试使用 deep 仍然无法处理 here

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

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

感谢@santanu 和@ittus

【问题讨论】：

我认为使用vue 观看vue-router 可能会适得其反，尤其是当vue-router 出于这个确切原因内置了钩子时

【参考方案1】：

您尝试过deep 选项吗？

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

【讨论】：

在这种情况下，我使用来自其他组件的路由器链接更改参数。

只看$route有用吗？ watch: '$route': handler: function(to) console.log(to.params) , deep: true

我在这里做一个简单的例子你可以看看here

你想达到什么目的？要拥有params，您需要将参数传递给路由器，例如document。否则，$route.params 为空对象。

我已经用methods: goTo: function(page) this.$router.push( name: page, params: page: page ); 传递参数我看起来我的开发工具上的参数不是空的

【参考方案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');

【讨论】：

Hay @santanu 我按照您的代码仍然无法正常工作。你能帮我here

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

@santanubera 如果所述组件永远不会被破坏，那么从它观察路由对象是完全有效的，例如您的导航组件。

【参考方案3】：

简单使用：

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

【参考方案4】：

我在反应性方面遇到问题，使用路由器链接动态更改路由。

问题是路线会改变，但我从 data() 返回的方法中获取的 siteData 没有：

我不得不像这样观看路线：

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

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