列表页点击到详情可以正常根据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的代码逻辑一样的
-
{{ item.title }}
detail.vue
{{detail.title}}
{{ detail.description }}
路由:
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;
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
初步估计问题出在detail.vue组件中。你的detail.vue的listId项的赋值出现了问题,尝试这样试一下:
这样组件初次加载的时候可以保证拿到正确的路由参数,在路由发生变化的时候也可以正确的拿到路由参数。