Vue中如何解决路由缓存问题

问题描述

问题 : 当两个地址都匹配同一个组件时 , 路由地址发生变化内容并没有跟着更新
原因 : 这个组件在路由切换的过程中，并没有重新销毁生成不会重复执行setup
 

解决办法

方法1 : 给router-view 添加key属性

https://blog.csdn.net/weixin_37834123/article/details/119991452

<router-view :key="$route.fullPath"/> 

方法2 : 使用watch监听id变化重新拉取接口

// (对象|数组|函数, (newVal, oldVal) => {}, {immediate: true|false, deep:true|false })
watch(() => route.params.id, (newVal) => {
  // 当id发生变化时重新发送Ajax并给数据复制
  // ...代码
}, { immediate: true })

方法3 : 使用onBeforeRouteUpdate 钩子函数

// 只执行一次
onMounted(() => {
  // 使用route.params.id发送ajax
})
// 路由变化时执行
// to：要跳转的路由对象
onBeforeRouteUpdate((to) => {
  // 使用to.params.id发送ajax
})