javascript - Données de la page de détails du commutateur VUE2.0

Question

Si vous cliquez sur les détails sur la page de liste, vous pouvez normalement changer les détails en fonction de l'identifiant.
Page de liste : la fonction de clic ajoute ceci.$router.push({ name : 'detail', params : { id : id }});
Les détails reçoivent l'identifiant transmis this.$route.params.id,

La colonne de droite de la page de liste a une navigation (articles populaires), cliquez sur l'article populaire pour changer le contenu détaillé
Le problème est : la barre d'adresse : xx/detail/id peut être passée normalement, mais le contenu détaillé a pas changé
Si le hachage normal change, celui correspondant doit être modifié. Données détaillées, clics sur les articles populaires, bien que le hachage ait changé, la page de détails n'est chargée qu'une seule fois
Quel maître Vue peut expliquer la raison

Les codes des trois pages spécifiques :
APP.vue

<template>
  <p id="app">
    <router-view></router-view>
  </p>
  <aside>
    <hotList></hotList>
  </aside>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import artList from './components/artList.vue'
  import hotList from './components/hotList.vue'
  export default {
    name:'app',
    components: {
      hotList,
      artList
    }
  }

</script>

hotList.vm, hotList.vm et artList.vm ont la même logique de code

<template>
  <p id="hotlist" class="hotlist">
    <ul>
      <li v-for="(item,index) in items" @click="goDetail(item.id)">
          {{ item.title }}
      </li>
    </ul>
  </p>

</template>

<script type="text/ecmascript-6">
  export default {
    name:'hotlist',
    data () {
      return {
        items: null,
      }
    },
    mounted: function(){
      this.$http.get('/api/list').then( function (response) {
        this.items = response.data
      }, function(error) {
        console.log(error)
      })

    },
    methods:{
      goDetail(id){
        this.$router.push({ name: 'detail', params: { id: id }});
      },
    }
  }
</script>

detail.vue

<template>
  <p id="detail" class="detail">
    <h2>{{detail.title}}</h2>
    <p>{{ detail.description }}</p>
  </p>

</template>

<script type="text/ecmascript-6">
  export default {
    name:'detail',
    data () {
      return {
        listId: this.$route.params.id,
        detail: {},
      }
    },
    mounted: function(){
      this.getDetail();
    },
    methods: {
      getDetail(){
        this.$http.get('/api/list/' + this.listId)
          .then(function (res) {
            this.detail   = res.data.id ? res.data : JSON.parse(res.request.response);
          }.bind(this))
          .catch(function (error) {
            console.log(error);
          });
      },
    }
  }
</script>

Routage :

import artListfrom '../components/artList.vue'
import detail from '../components/detail.vue'
const router = new VueRouter({
  routes:[
    {
      path:'/home',
      name: 'home',
      component: artList,
      },
       {
      path: '/home/artList/detail/:id',
      name: 'detail',
      component: detail,
    }
    ]
    });
    export default router;

Answer 1

L'estimation initiale est que le problème réside dans le composant detail.vue. Il y a un problème avec l'affectation de l'élément listId dans votre detail.vue Essayez ceci :

.

export default {
    data () {
        return {
            listId: ''
        }
    },
    
    mounted () {
        // 1.组件初步加载时赋值一次
        this.listId = this.$route.params.id;
    },
    
    watch: {
        '$route': function () {
            //2. $route发生变化时再次赋值listId
            this.listId = this.$route.params.id;
        }
    }
}

De cette façon, vous pouvez vous assurer que vous obtenez les paramètres de routage corrects lorsque le composant est chargé pour la première fois, et vous pouvez également obtenir les paramètres de routage correctement lorsque le routage change.