如何为路由器视图设置观察者我vue答案

【问题标题】：How to set watcher for router-view i vue如何为路由器视图设置观察者我vue
【发布时间】：2020-07-01 02:20:49
【问题描述】：

我是 vue 的初学者，我无法解决 VueRouter 的问题。

我得到了像

这样的主要应用程序组件

<template>
 <div>
  <Header />
  <router-view />
  <Footer />
 </div>
</template>

我的一个路由器组件具有从数据库获取数据的功能。

import axios from 'axios';

export default {
    name: 'ComponentName',
  data() {
    return {
      dataFromDatabase: []
    }
  },
  methods: {
    getData: function() {
      // Axios get function  to get data from database and add it to this.dataFromDatabase array
    }
  },
  created() {
    this.getData();
  }
}

给定的数据基于 url 参数，当单击整个应用程序中标题或其他位置的链接时，它应该可以更改。问题是如果组件不重新加载，它就无法更改。我知道问题是在创建组件后调用函数并且不再调用。

所以我的问题是： 有什么方法可以观察 url 参数的变化（将 this.$route.params.param 添加到 watch() 函数不起作用）。也许有更好的方法来设置我的路由或其他方法来调用除 created() 函数之外的函数，或者每次链接更改时组件都会重新加载。正如我所说，即使在未在路由器中设置的组件中，指向此的链接也可以无处不在

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

你可能只需要 watch 顺便说一句，它不是一个函数，而是一个内部有方法的对象

watch: {
  '$route'() {
    // do something
  }
}

【讨论】：

【解决方案2】：

您可以使用自组件创建以来将监视的智能观察器：

watch: {
  '$route': {
    immediate: true,
    handler(newValue, oldValue) {
      // ...
    }
  }
}

【讨论】：