Question

我是 vue3 的新手。我的一个组件有一个奇怪的反应。我在许多组件中使用 vue router/router-link 标签没有问题，但在其中一个组件中，当我单击按钮时，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>

router.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

编辑：我只是看到这个，但不明白 screenshot

EDIT2：由于一些古老的未知原因，我在另一个组件 (List.vue) 中放入了一个 :

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

当我删除它时，它几乎可以工作。现在，路由没问题，但是目标组件（例如：List）不会替换 Message 组件，而是发生在上面。这很奇怪，因为我在这些组件中没有路由器视图，只有在它们的父 (Welcome.vue) 组件中:( List and Message components at the same time screenshot :(

VueRouter 有时会更改 URL 但不会更改组件

0 个答案: