商品详情页的子路由
首页列表->详情页
首页的子组件ShopsListItem.vue中
showDetail(id) {
this.$router.push({
path: '/detail',
query: { id }
})
}
问题:子路由跳转参数不会随之携带
Detail.vue的mounted中就保存this.id = this.$router.query.id
传递给TabControl子组件:id = 'id'
TabControl中
@click="changeTab({ path: item.path })
changeTab(obj) {
this.$router.push({
path: obj.path,
query: { id: this.id }
})
}
问题:回退路由,激活样式不会改变
子路由改变,应该在父路由中监听
父路由Detail中
currentPath: '/detail' //默认为/detail
watch: {
$route: {
handler(val) {
// console.log(val.path)
// console.log(oldval)
this.currentPath = val.path
}
}
}
把currentPath传个TabControl子组件中
:current-path="currentPath"
props: {
currentPath: String
}
监听currentPath,实质监听路由变化(回退)
data() {
return {
currentIndex: 0,
pathList: ['/detail', '/ratings', '/info']
}
}
watch: {
// 监听传过来的path值
currentPath(val) {
// console.log(val)
this.currentIndex = this.pathList.findIndex(item => item === val)
}
}
:class="currentIndex === index ? 'active' : ''"