javascript - VUE2.0 切換詳情頁數據

Question

列表頁點擊到詳情可以正常根據id切換詳情內容
列表頁：click函數添加this.$router.push({ name: 'detail', params: { id: id }});
詳情接收傳遞過來的id this.$route.params.id,

清單頁右欄做了個導覽(熱門文章)，點選熱門文章切換詳情內容
問題是：網址列：xx/detail/id可以正常傳遞，詳情內容沒變化
正常hash有變化就應該更改對應的詳情數據，熱門文章點擊，雖然hash變了，詳情頁面只加載了一次
哪位vue大神可以給講下原因啊

具體三個頁面的程式碼：
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和artList.vm的程式碼邏輯一樣的

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

路由：

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

這樣元件初次載入的時候可以確保拿到正確的路由參數，在路由發生變化的時候也可以正確的拿到路由參數。