Vue 中的路由缓存问题

Zesari 发布于 2025-02-01 86 次阅读


背景

在由”服饰“切换至”数码“时,页面组件都没有发生变化

原因

查阅文档得知,当前属于相应路由参数发生了变化,相同组件实例被重用

当路由参数发生变化时,由于组件的生命周期钩子不会被调用,导致页面组件没有发生变化

现在我们需要当路由发生变化时,重新执行 getCategory

文档中提供了两种方法:

  1. watch 监听路由并对路由变化做出响应:重新执行 getCategory
  2. 使用 beforeRouterUpdate 导航守卫

方法1:用 watch 监听路由并对路由变化做出响应

watch(() => route.params.id, (newId, oldId) => {
  getCategory(route.params.id)
})

方法2:使用 beforeRouterUpdate 导航守卫

onBeforeRouteUpdate((to) => {
  getCategory(to.params.id)
})

Hello, It's me.
最后更新于 2025-02-01