VueRouter는 URL을 변경하지만 구성 요소는 변경하지 않음

VueRouter는 URL을 변경하지만 구성 요소는 변경하지 않음

나는 vue3에 새로 왔다.내 구성요소 중 하나가 이상한 반응을 보인다.나는 많은 구성 요소에서 문제없이 vue 라우터/라우터 링크 태그를 사용하지만 그 중 하나에서 버튼을 클릭하면 url이 올바르게 변경되지만 F5를 누를 때까지 새 구성 요소로 새로 고쳐지지 않는다.구조는 다른 구성 요소와 다르지 않다 : (사전 감사)

구성 요소:

<template>

  <router-link :to="{ name: 'List', params : {pageId : 1 }}"><Btn msg="Retour à la liste des derniers messages"/></router-link>
  <div class="originalMsg">
    <h3>{{ originMsg.title }}</h3>
    <p>Auteur : {{ originMsg.User.firstname +' '+ originMsg.User.lastname}} - Date de rédaction: {{ originMsg.creation_date }}</p>
   
    <div class="content">
      {{ originMsg.content }}<br>
      <hr>
      <router-link :to="{ name: 'NewMessage', query:{ responseTo : originMsg.id}}"><Btn msg="Répondre"/></router-link>
      <router-link :to="{ name: 'Modify', query:{ id : originMsg.id, title : originMsg.title, content : originMsg.content}}"><Btn msg="Modifier"/></router-link>
    </div> 
  
  </div>
  <div v-if="responses.length>0" class="responses">
    <p v-for="(response, index) in responses" :key="index"> {{ response }}</p>
  </div>
</template>

<script>
import Btn from "../components/Button.vue";

export default {
  name: "Message",
  components:{
    Btn
  },
  data(){
    return{
      originMsg:{},
      responses:[],
    }
  },
  async beforeCreate(){
    
    let tmp = this.$route.query.parentMsg
    
    if(this.$route.query.parentMsg==null){
      tmp = this.$route.params.msgId
    }
    
    //récupère message d'origine
    let parentMsg = await fetch(this.$store.state.src + 'message/' + tmp,{
      method: "POST",
      headers: {
        'authorization': 'bearer ' + localStorage.getItem('token'),
        'content-type': 'application/json'          
      },
      body: JSON.stringify({userId:parseInt(localStorage.getItem('userId'))})
    });
    parentMsg = await parentMsg.json();
    this.originMsg = parentMsg.msg;
    
    //récupère tableau de réponses
    let responseList = await fetch(this.$store.state.src + 'message/responses/' + tmp,{ 
      method: "POST",
      headers: {
        'authorization': 'bearer ' + localStorage.getItem('token'),
        'content-type': 'application/json'          
      },
      body: JSON.stringify({userId:parseInt(localStorage.getItem('userId'))})
    });
    responseList = await responseList.json()
    this.responses = responseList.list
  }
};
</script>

라우터.js:

import { createRouter, createWebHistory } from 'vue-router'
import Connect from '../views/Connect.vue'
import Signup from '../views/Signup.vue'
import Reinit from '../views/Reinit.vue'
import Welcome from '../views/Welcome.vue'
import Profil from '../views/Profil.vue'
import List from '../views/List.vue'
import Message from '../views/Message.vue'
import NewMessage from '../views/NewMessage.vue'
import NotFound from '../views/NotFound.vue'

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Connect
  },
  {
    path: '/signup',
    name: 'Signup',
    component: Signup
  }, {
    path: '/reinit',
    name: 'Reinit',
    component: Reinit
  }, {
    path: '/home',
    name: 'Welcome',
    component: Welcome,
    children: [{
      path: 'list/:pageId',
      name:"List",
      component: List
    },{
      path: 'profil/:userId',
      name:"Profil",
      component: Profil
    },{
      path: 'message/:msgId',
      name: "Message",
      component: Message      
    },{
      path: 'message/new',
      name: "NewMessage",
      component: NewMessage      
    },{
      path: 'message/modify',
      name : "Modify",
      component: NewMessage
    }]
  },{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound }, 
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

편집: 이 화면만 표시되지만 이해되지 않음 스크린샷

편집2: 오래된 알 수 없는 이유로 다른 구성 요소(List.vue), a:

watch: { 
  $route(to, from) {
    if(to !== from){location.reload();}
  }
}

내가 제거하면 거의 효과가 있어.이제 라우팅은 괜찮지만, 대상 구성요소(예: List)는 Message 구성요소를 대체하지 않고 위에서 이루어진다.그 구성 요소에는 라우터 보기가 없고 부모(Welcome)에만 있기 때문에 이상하다.vue) 구성 요소 : (목록 구성 요소와 메시지 구성 요소를 동시에 스크린샷:()

참조URL: https://stackoverflow.com/questions/67278829/vuerouter-sometime-change-url-but-doesnt-change-component