当前位置：首页 > ops >正文

Vue3解决路由缓存问题

ops 2025/7/28 2:38:54

什么是路由缓存

响应路由参数的变化

使用带有参数的路由时需要注意的是，当用户从 /users/johnny导航到 /users/jolyne时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。
问题:一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新

演示：

由上面两张图片可以看出我们切换了页面的分类，并且id也发生了变化，但是页面却还是一样的

解决问题的思路:1.让组件实例不复用，强制销毁重建 2.监听路由变化，变化之后执行数据更新操作

方案一:给router-view添加key

以当前路由完整路径为key的值，给router-view组件绑定

最常见的用例是与 v-for 结合:

  <!-- 添加key 破坏复用机制 强制销毁重建 --><RouterView :key="$route.path" />

也可以用于强制替换一个元素/组件而不是复用它。当你想这么做时它可能会很有用:

在适当的时候触发组件的生命周期钩子
触发过渡

代码:

  <!-- 添加key 破坏复用机制 强制销毁重建 --><RouterView :key="$route.path" />

这时我们就发现这两个不同的分类给我们展示了不同的页面

弊端：它把整个示例都销毁重建了，所以组件的所有请求都会重新发送这样就造成了一定的资源浪费(因为有一些数据可能是不需要改变的比如banner图，不管在哪个分类下展示的banner图都是一样的)

方案二:使用beforeRouteUpdate导航钩子

beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可

使用示例

import { onBeforeRouteUpdate } from 'vue-router';
// 获取路由参数
const route = useRoute()
const routeId = route.params.idconst categoryData = ref({})
const getCategoryList = async (id = routeId) => {const res = await getCategory(id)console.log(res)categoryData.value = res.result
}onMounted(() => {// 第一次调用的时候不用传递参数，让他使用默认的getCategoryList()
})// 目标：路由参数发生变化时 可以把分类数据接口重新发送
onBeforeRouteUpdate((to)=>{console.log('路由发生变化了');// 存在问题：使用最新的路由参数请求最新的分类数据
//（从名字before可以看出是跳转之前所执行的，route.params.id有一定的滞后性，所以不能直接用route.params.id）console.log(to);getCategoryList(to.params.id)    
})