Question

我已经设置了动态路由匹配，但是当我想刷新相同的组件时遇到问题。

我已经阅读到我需要实现一个观察器，但是文档中没有提供太多细节，而且我也不知道在观察器中放置什么内容。

我已经尝试过将to路径放入观察者内部，但是它不起作用。我是Vue的新手，以前从未使用过手表。

这是我的代码：

<template>
  <div class="singleRestaurant">
    <div class="aside__data" v-for="(data,index) in displayRestaurantInfo" :key="data.restaurantName">
      <ul class="aside__list">
        <li class="aside__name"> {{ data.restaurantName }}</li>
        <li class="aside__score">
          <score-app :star-number="data.averageRating"></score-app>
        </li>
        <li class="aside__description"> {{ data.description }} </li>
        <div class="container">
          <div class="row row__first">
            <div class="col-6">
              <li class="aside__button-read-comment">
                <button-read-comments :onClick="button">
                  <router-link class="button-text" :to='"/read-comments/" + index'>Les avis</router-link>
                </button-read-comments>
              </li>
            </div>
            <div class="col-6">
              <li class="aside__button-add-comment">
                <button-add-comment :onClick="button">
                  <router-link class="button-text" :to='"/add-comment/" + index'>Votre avis</router-link>
                </button-add-comment>
              </li>
            </div>
          </div>
        </div>
      </ul>
    </div>
  </div>
</template>


<script>
  import ButtonReadComments from '../side-components/ButtonReadComments.vue';
  import ButtonAddComment from '../side-components/ButtonAddComment.vue';
  import ScoreStars from '../side-components/ScoreStars.vue';

  export default {
    name: "single-restaurant-app",
    data: function() {
      return {}
    },
    components: {
      ButtonReadComments,
      ButtonAddComment,
      "score-app": ScoreStars
    },
    methods: {
      button: function() {
        console.log('Working');
      }
    },
    computed: {
      displayRestaurantInfo() {
        return this.$store.getters.getRestaurantInfo;
      }
    },
    watch: {
      '$route' (to, from) {
        to='"/add-comment/" + index';
      }
    }
  }
</script>

<style scoped>
  .aside__list {
    list-style-type: none;
    margin-top: 2rem;
  }

  .aside__name {
    font-size: 2.5rem;
    font-weight: bold;
    display: inline-block;
  }

  .aside__score {
    display: inline-block;
    margin-left: 1rem;
    vertical-align: super
  }

  .aside__description {
    font-size: 2rem;
  }

  .row__first {
    margin: 0;
    margin-top: 1rem;
  }

  .button-text {
    font-size: 1.5rem;
    text-decoration: none;
    color: #EBEBEB;
  }
</style>

我想了解如何使用手表，以使我的组件对路线变化做出反应。谢谢。

如何实现Vue Router组件刷新的观察程序？

0 个答案: