vue3前端开发-小兔鲜项目-路由缓存的更新解决办法

yrldjsbk2024-07-23 19:07

vue3前端开发-小兔鲜项目-路由缓存的更新解决办法！默认情况下，如果我们不想办法解决这个问题，vue3框架有个默认的约定，那就是，当仅仅是路由参数发生变化的时候，框架并不会更新整个模块的内容。但是我们现在需要看见的是，路由参数变化后，要刷新整个模块内的数据信息。为此，有两种解决思路。

1：第一种思路是，直接在路由标签里面加入一个参数。

复制代码

  <!--这种方式，会重新刷新整个模块的生命周期，但是，我们仅仅是想实现部分内容的刷新，所以我们不用这个方式-->
  <RouterView  :key="$route.fullPath"/>

借助于这个：key的绑定属性，来实现刷新更改整个模块内容的效果。

但是，我们仅仅是希望更新部分内容啊。所以这个方式我们不用它。

2：我们采用第二种思路。

调用一个钩子函数。

onBeforeRouteUpdate

复制代码

import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate((to)=>{
  //把动态变化的路由参数值传递给函数
  getCagegoryData(to.params.id)
})
//加载banne

如图，我们给函数增加了一个参数。这个参数就是官方框架自带的，一个对象，它里面有那个路径的参数id

我们对应的也需要稍微的修改一下，之前的函数了。

复制代码

const getCagegoryData = async (id = route.params.id) =>{
    // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
    const res = await getCategoryAPI(id)
    categoryData.value = res.result
}

如图所示，代码参数里面，有一个默认值（不赋值的情况下，就是调用的那个默认值，）。如果赋值了，就是我们赋值的内容。向后面传递。

这样就可以确保，初始化操作，和后期的修改操作，都能渲染更新框架内的数据信息了。