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;