Vue3---什么是路由缓存问题

使用带有参数的路由时需要注意的是,当用户从 /users/johnny 导航到 /users/jolyne 时,相同的组件实例将被重复使用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会被调用。

问题:一级分类的切换正好满足上面的条件,组件实例复用, 导致分类数据无法更新
解决问题的思路:1. 让组件实例不复用,强制销毁重建 2. 监听路由变化,变化之后执行数据更新操作。

图例:从美食跳到服装

Vue3---什么是路由缓存问题_第1张图片

 ​​​Vue3---什么是路由缓存问题_第2张图片

 方案一:给router-view添加key

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

Vue3---什么是路由缓存问题_第3张图片

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

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

缺点:组件内所有请求都会发送

 方案二:使用beforeRouteUpdate导航钩子

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

 

你可能感兴趣的:(前端)