javascript - VUE2.0 schaltet Detailseitendaten um

Question

Wenn Sie auf der Listenseite auf die Details klicken, können Sie die Details entsprechend der ID wechseln.
Listenseite: Die Klickfunktion fügt Folgendes hinzu: $router.push({ name: 'detail', params: { id: id }});
Die Details erhalten die übergebene ID this.$route.params.id,

Die rechte Spalte der Listenseite verfügt über eine Navigation (beliebte Artikel). Klicken Sie auf den beliebten Artikel, um den detaillierten Inhalt zu wechseln.
Das Problem ist: Die Adressleiste: xx/detail/id kann normal übergeben werden, der detaillierte Inhalt jedoch nicht geändert
Wenn sich der normale Hash ändert, sollten die entsprechenden Detaildaten geändert werden, Klicks auf beliebte Artikel, obwohl sich der Hash geändert hat, wird die Detailseite nur einmal geladen
Welcher Vue-Master kann den Grund erklären

Die Codes der drei spezifischen Seiten:
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 und artList.vm haben die gleiche Codelogik

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

Routenplan:

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

初步估计问题出在detail.vue组件中。你的detail.vue的listId项的赋值出现了问题，尝试这样试一下：

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;
        }
    }
}

这样组件初次加载的时候可以保证拿到正确的路由参数，在路由发生变化的时候也可以正确的拿到路由参数。