Как заставить перезагружаться View при изменении роута Vue3?

Как Вы заставляете перезагружать представление Vue3?

Вот мой код:

<template>
  <div>
    <h1>{{ category.name }}</h1>
    <div v-for="video in videos.results" :key="video">
      <router-link :to="{ name: 'Video', params: { id: video.id }}">{{ video.name }}</router-link>
    </div>
  </div>
</template>

<script>
  // eslint-disable-next-line no-unused-vars
  // @ is an alias to /src
  //
  import VideoService from '@/services/VideoService.js';

  // import axios from "axios"

  export default {
    name: 'Videos',
    components: {

    },

    data() {
      return {
        category: {},
        videos: []
      }
    },

    created() {
      this.getOneCategory();
      this.getVideosByCategory();
    },

    methods: {
      async getOneCategory() {
        VideoService.getOneCategory(this.$route.params.id)
        .then(
          (category => {
            this.category = category;
          })
        );
      },

      async getVideosByCategory() {
        VideoService.getVideosByCategory(this.$route.params.id)
        .then(
          (videos => {
            this.videos = videos;
          })
        );
      }
    }
  }
</script>

Задача перерендерить представление если this.$route.params.id измениться.

Как мне такое сделать?


Ответы (1 шт):

Автор решения: Dudy

Я добавил атрибут key в компонент router-view с маршрутом.

Получилось вот так:

<router-view :key="$route.fullPath" />
→ Ссылка