javascript - VUE2.0 切换详情页数据
学习ing
学习ing 2017-07-05 10:47:46
0
1
1115

列表页点击到详情可以正常根据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;
学习ing
学习ing

全部回复(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;
        }
    }
}

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!