商品详情页的子路由

商品详情页的子路由

首页列表->详情页

首页的子组件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' : ''"