javascript - VUE2.0 切换详情页数据

问题描述

问 题

列表页点击到详情可以正常根据id切换详情内容
列表页：click函数添加 this.$router.push({ name: 'detail', params: { id: id }});
详情接收传递过来的id this.$route.params.id,

列表页右栏做了个导航(热门文章)，点击热门文章切换详情内容
问题是：地址栏：xx/detail/id可以正常传递，详情内容没变化
正常hash有变化就应该更改对应的详情数据，热门文章点击，虽然hash变了，详情页面只加载了一次
哪位vue大神可以给讲下原因啊

具体三个页面的代码：
APP.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
  <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>
  <div id="hotlist" class="hotlist">
    <ul>
      <li v-for="(item,index) in items" @click="goDetail(item.id)">
          {{ item.title }}
      </li>
    </ul>
  </div>

</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>
  <div id="detail" class="detail">
    <h2>{{detail.title}}</h2>
    <p>{{ detail.description }}</p>
  </div>

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

解决方案

初步估计问题出在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;
        }
    }
}

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

这篇关于javascript - VUE2.0 切换详情页数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！