javascript - VUE2.0 切换详情页数据
学习ing
学习ing 2017-07-05 10:47:46
[JavaScript讨论组]

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

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

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



hotList.vm ,,hotList.vm和artList.vm的代码逻辑一样的



detail.vue



路由:

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号