javascript - VUE2.0 switches details page data

Question

Clicking on the details on the list page can switch the details according to the id normally
List page: click function adds this.$router.push({ name: 'detail', params: { id: id }});
Details receive the passed id this.$route.params.id,

The right column of the list page has a navigation (popular articles), click on the popular articles to switch the detailed content
The problem is: the address bar: xx/detail/id can be passed normally, and the detailed content has not changed
Normal hash has If there is a change, the corresponding detail data should be changed. When clicking on a popular article, although the hash has changed, the details page is only loaded once.
Can any Vue master explain the reason?

Codes for the three specific pages:
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 and artList.vm have the same code logic

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

routing:

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

Initial estimate is that the problem lies in the detail.vue component. There is a problem with the assignment of the listId item in your detail.vue. Try this:

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

In this way, you can ensure that you get the correct routing parameters when the component is loaded for the first time, and you can also get the routing parameters correctly when the routing changes.