Наблюдайте, что $ route.params.id не вызывает повторную визуализацию компонента Vue

Question

У меня есть компонент Post, который отображает сообщения пользователя. URL / Маршрут, чтобы добраться до поста, выглядит следующим образом:

http://localhost:8080/123-todays-bike-ride с 123, являющимся параметром PostID в маршруте.

В моем компоненте Post.vue у меня есть следующий код:

<template>
    <div>
        <h1>{{Post.PostTitle}}</h1>
        <p>{{Post.Content}}</p>
    </div>
</template>

<script>
    export default {
        name: "Post",
        watch:{
            '$route.params.PostID': function() {
                    this.getPost(); // does not seem to be triggered?
                }
        },
        computed:
            {
                Post() {
                    return this.$store.getters.getPost
                }
            },
        serverPrefetch() {
            return this.getPost();  // to do with SSR
        },
        mounted() {
            if (this.Post == null || !this.Post.length) {
                this.getPost();
            }
        },
        methods: {
            getPost() {
                return this.$store.dispatch('loadPost', {PostID: this.$route.params.PostID})

            }
        }
    }
</script>

Проблема в том, что даже если я перейду с http://localhost:8080/123-todays-bike-ride на http://localhost:8080/999-swimming, тогда URL-адрес в адресной строке браузера изменится, но содержимое представления Post не изменится - он остается с тем же содержанием, что и сообщение 123-todays-bike-ride.

Ясно, что бит watch: { '$route.params.PostID'... не работает, но почему и как его решить?

Answer 1

Вы можете попытаться заставить его смотреть глубже:

   watch: {
    "$route.params.PostID": {
      handler: function(value) {
        console.log(value);
      },
      deep: true,
      immediate: true,
    },
  },

---

Также еще один способ сделать это путем повторного рендеринга компонента без использования watch:

, добавив :key="$route.params.PostID" для компонента Post, например:

внутри ParentComponent.vue

<template>
    <Post :key="$route.params.PostID" />
</template>