如何在路由更改时显示来自 db 的数据？答案

【问题标题】：How do i display data from db on a route change?如何在路由更改时显示来自 db 的数据？
【发布时间】：2021-01-03 07:34:49
【问题描述】：

我正在 vue.js + firebase 中开发一个类似 Messenger 的应用程序。我想做的是 - 在每次路由更改时，从 db 中获取一些对应于 id（存储在路由中）的数据，然后将其显示在屏幕上。我在处理这些数据时遇到了一些奇怪的行为，但它并没有按预期工作。

代码：

  methods: {
    getRoomName() {
      db.collection("rooms")
        .doc(this.params)
        .onSnapshot((snapshot) => (this.roomName = snapshot.data().name));
    },
  },
  watch: {
    $route(to, from) {
      this.getRoomName();
    },
  },

数据在哪里：

data() {
    return {
      input: "",
      roomName: "",
      params: this.$route.params.id,
      message: "",
      roomNameTest: "",
    };
  },

模板：<span class="roomName">{{roomName}}</span>

【问题讨论】：

您能否详细说明“奇怪的行为”究竟是什么意思？我注意到的第一件事是您在 data() 处调用 this.$route，它不起作用。如果您需要填充某些内容，请尝试使用 Vue vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
我一删除数据中的 this.$route 并将其直接移动到函数中，它就开始按预期工作。谢谢！
我会详细说明一个答案，请接受它以帮助其他人:)

标签： javascript firebase vue.js google-cloud-firestore vuefire

【解决方案1】：

我注意到的第一件事是你在 data() 处调用 this.$route，它不起作用。如果您需要填充某些内容，请尝试使用Vue Lifecycle Hooks。

【讨论】：

【解决方案2】：

生命周期钩子（mounted/created就是针对这类事情的，分别在vue实例创建和挂载时调用。

mounted() // it can also work for the created hook {
  this.getRoomName();
},

watcher 监视路由更改，但并不真正适合这种情况，因为当路由更改时，它正在监视的组件尚未实例化。当您正在观看的特定 Vue 实例分别被实例化/挂载时，将触发挂载/创建的钩子。

使用观察器进行路由更改的适当时间是，如果 url 上的参数发生更改并且您需要做一些事情。一个例子是改变/users/1 to /users/2`。这将起作用，因为使用了相同的组件并且观察者将检测到更改。

【讨论】：

感谢您的回答！在我的情况下，我将路线从 rooms/{id_of_the_room} 更改为 rooms/{id_of_another_room} 所以我认为在这种情况下很好。非常感谢一些关于生命周期钩子的信息
id 使用的是同一个组件吗？
yup ``` { 路径：'/rooms/:id'，名称：'Pokoje'，组件：主页，}，```
那没关系。它应该工作。你说它在 $route 对象被放入函数时起作用。你到底想发生什么。顺便说一句，第一次创建组件时，观察者不工作（当组件被路由到或刷新浏览器时会发生这种情况）。在这些情况下，您将需要一个 created 或 mounted 挂钩。这或许可以解释。观察者随后工作（在这种情况下，当在同一个组件中从参数导航到参数时。您可以阅读有关 vue 生命周期挂钩的更多信息here。

【解决方案3】：

我正在使用 $route.path 来监视更改以获取新 ID。

组件

  computed: {
    ...mapState('products', ['products']),
  },
  watch: {
    '$route.path'() {
      this.bindProducts(this.IdFromUrl)
    },
  },

  mounted() {
    this.bindProducts(this.IdFromUrl)
  },

  methods: {
    ...mapActions('products', ['bindProducts']),
  }

在我的商店中运行的是 vuexfire。或者，您可以绑定自己的数据。

【讨论】：