Vue3---什么是路由缓存问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3---什么是路由缓存问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

问题：一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新

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

图例：从美食跳到服装

Vue3---什么是路由缓存问题,前端

方案一：给router-view添加key

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

Vue3---什么是路由缓存问题,前端

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

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

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

方案二：使用beforeRouteUpdate导航钩子

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

<script setup>
import {getCategoryAPI} from "@/apis/category"
import { onMounted, ref} from "vue";
import {onBeforeRouteUpdate, useRoute} from "vue-router";
import GoodsItem from "@/views/Home/components/GoodsItem.vue";
// 面包屑
const categoryData = ref({})
const route = useRoute()
// 如果传参数了，就为to.params.id ，如果没有传就为route.params.id
const getCategory = async (id = route.params.id) => {
    // const res = await getCategoryAPI(route.params.id)
    const res = await getCategoryAPI(id)
    categoryData.value = res.result
}
onMounted(() => getCategory())

// 方法二：路由参数发生变化时，分类接口重新发送
onBeforeRouteUpdate((to) => {
    // console.log('路由发生变化了')
    console.log(to)
    getCategory(to.params.id)
})
</script>

文章来源地址https://www.toymoban.com/news/detail-557692.html

到了这里，关于Vue3---什么是路由缓存问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！