vue 路由带参数跳转，页面有缓存,问题的解决方法

一.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简单粗暴，避免提前优化