在同一页面下,切换不同组件,路由发生变化,但是数据不重载
在嵌套路由时容易出现的问题:
列表——>详情 问题:
当列表和详情在同一父组件视图下时,详情是通过‘子路由’引入的,此时修改路由/detail/1,/detail/2,detail组件只被加载一次,路由组件不会因为路由的变化,而重载。
这是由于Vue底层虚拟DOM比较导致的,对detail组件进行了缓存,这会导致detail组建内的生命周期函数不会重新调用,data不会重新初始化,看到的现象就是:更新路由,数据视图不变化,刷新一下才会变化
有两种解决办法:
1,另一种做法:是为router-view提供一个独立key,让每次detail组件都被进行重载
<template>
<div class="flex">
<ul>
<li v-for="i in 3" :key="i" @click="$router.push({
name:'detail',
params:{id:i}
})">列表{{ i }}</li>
</ul>
<div class="container">
//key的值与路由相同,容易区分,也可以是其他随机值
<router-view :key="$route.path"></router-view>
</div>
</div>
</template>
2,vue-router官方推荐:在detail组件中对 $router进行watch,将业务代码都写在监听中(优点:组件不重载,数据可以局部更新,性能效率高,缺点:代码编写容易混乱)
export default {
// 详情业务
data () {
return {
count: '详情页面' + this.$route.params.id
}
},
created () {
alert('create')
},
mounted () {
alert('mounted')
}
监听路由,重载页面
watch: {
$route (newVal, oldVal) {
alert(newVal.fullPath)
this.count = '详情页面' + this.$route.params.id
alert('create')
alert('mounted')
}
}
}