一.vue 路由带参数跳转,页面有缓存,问题的解决方法
a.从mv点击到mv详情页,第一次是没有问题的,返回列表再次选择一个不同的mv点击详情,数据还是第一次的数据
<template>
<div @click="mvHandle(item.id)"></div>
</template>
<script>
export default {
name:'MvList',
data(){
return{
}
},
methods:{
mvHandle(id){
this.$router.push({name:'MvDetail',params:{id:id}})
}
}
}
</script>
b.
<script>
export default {
name:'MvDetail',
data(){
return{
mvId:0,
}
},
created(){
this.mvId=this.$route.params.id
this.getList();
},
methods:{
//获取mv详情方法
getList(){
const params ={mvid:this.mvId}
_getDetailMv(params).then(res=>{
this.mvDetail = res.data.data
})
const paramsUrl ={id:this.mvId}
_getUrlMv(paramsUrl).then(res=>{
this.mvUrl = res.data.data.url
})
_getSimiMv(params).then(res=>{
this.mvsList = res.data.mvs
})
this.getCommentMv()
},
}
</script>
2.三种可选方案
a. 给router-view 添加key属性
<router-view :key="$route.fullPath"/>
b. 使用watch监听id变化重新拉取接口
watch(
()=>{ return route.params.id },
()=>{ loadCategoryList() } // 在id变化的时候重新使用最新的路由id拉取最新数据
)
c. 使用onBeforeRouteUpdate 钩子函数 (推荐)
async function loadCategoryList (id) {
const res = await findTopCategory(id)
categoryData.value = res.result
breadName.value = res.result.name
}
onMounted(() => {
loadCategoryList(route.params.id)
})
// 在路由跳转之后更新之前自动执行
// beforeEach((to,from,next)=>{})
onBeforeRouteUpdate((to) => {
// to指代的是目标路由对象 to拿到最新的路由参数id
// 使用最新id获取数据
loadCategoryList(to.params.id)
})
根据不一样的场景要求使用不一样的技术方案,如果性能要求很高,第三种方案,如果不涉及性能问题,使用key简单粗暴,避免提前优化