javascript - VUE2.0 menukar data halaman butiran

Question

Jika anda mengklik pada butiran pada halaman senarai, anda boleh menukar butiran mengikut id seperti biasa
Halaman senarai: Fungsi klik menambah ini.$router.push({ name: 'detail', params: { id:. id }});
Butiran menerima id yang diluluskan ini.$route.params.id,

Lajur kanan halaman senarai mempunyai navigasi (artikel popular), klik pada artikel popular untuk menukar kandungan terperinci
Masalahnya ialah: bar alamat: xx/detail/id boleh dilalui secara normal, tetapi kandungan terperinci mempunyai tidak diubah
Jika cincang biasa berubah, cincang yang sepadan harus ditukar Data terperinci, klik pada artikel popular, walaupun cincang telah berubah, halaman butiran hanya dimuatkan sekali sahaja
Master Vue mana yang boleh menerangkan sebabnya

Kod bagi tiga halaman khusus:
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 dan artList.vm mempunyai logik kod yang sama

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

Penghalaan:

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

Anggaran awal ialah masalahnya terletak pada komponen detail.vue. Terdapat masalah dengan tugasan item listId dalam butiran anda.vue Cuba ini:

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

Dengan cara ini, anda boleh memastikan bahawa anda mendapat parameter penghalaan yang betul apabila komponen dimuatkan buat kali pertama, dan anda juga boleh mendapatkan parameter penghalaan dengan betul apabila penghalaan berubah.