VUE3-------路由缓存

VUE3-------路由缓存

---

---

问题

路由缓存问题： path不变的情况下 vue-router会选择就地复用组件 导致组件不会重新渲染 钩子函数不会再次执行 ajax请求不会再次发起

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue3中路由的使用

setup中使用route或者是router实例

 import {useRoute,useRouter} from 'vue-router'
   const route = useRoute()  // 参数的获取  this.$route
   const router= useRouter() // 方法使用  this.$router

二、解决问题

1.使用watch监听解决路由缓存问题

1.技术实现：

     1. watch监听路由id变化  只要一变化就执行加载数据的逻辑即可
     2. key 不适用缓存
     3. onBeforeRouteUpate   vue-router setup 路由更新前自动调用

2.代码落地：

import {onBeforeRouteUpate } from 'vue-router'
        setup(){
           onBeforeRouteUpate((to)=>{
              // to:目标路由对象
              // to.params.id  拿到跳转过去的路由id参数
              // loadData(to.params.id)
           })
        }

2.使用key去解决路由缓存问题

1.使用：找到路由出口 加一个key属性

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

2.基础原理

router-view 在默认情况下 path不变的情况下 会就地复用 
router-view 加上key之后  fullPath变化 就会重新强制渲染
(path对应的组件 会进行完全的销毁重建 所有的生命周期钩子函数都会重新执行一遍)

3.使用方法选择

• 对于渲染性能要求高不高 如果非常高 建议使用watch监听 不要破坏复用机制
• 对于渲染性能要求不高 加上key 强制刷新