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

问题描述

我正在vue.js + firebase中开发类似Messenger的应用程序。我要做的是-在每次更改路由时，从db中获取一些与ID（存储在route中）相对应的数据核心，然后将其显示在屏幕上。这些数据使我有些奇怪的行为，而且按预期的方式行不通。

代码：

  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 Lifecycle Hooks。

,

生命周期挂钩（已挂载/创建用于此类操作。分别在创建和挂载vue实例时调用它们。

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

该监视程序监视路线更改，但实际上并不适合这种情况，因为在更改路线时，尚未实例化正在监视的组件。当您正在观看的特定Vue实例分别实例化/安装时，将触发安装/创建的挂钩。

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

,

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

组件

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

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