Vue路由缓存问题

路由缓存问题的产生

VueRouter允许用户在页面中创建多个视图(多级路由),并根据路由参数来动态的切换视图。使用带参数的路由时,相同的组件实例将被重复使用。因为两个路由都渲染同一个组件,比起销毁再创建,复用则显得高效。不过,这也意味着组件的生命周期钩子不会被调用。如下导航栏:

路由缓存带来的问题

  • 内存消耗:缓存页面组件可能导致内存占用增加。
  • 数据过时:如果缓存的页面状态不及时更新,用户可能会看到过时的数据。
  • 交互问题:页面状态被保留可能导致一些交互问题。比如在某个路由上打开了一个弹出窗口,在切换路由后回来,弹出窗口可能仍然显示。
  • 生命周期问题:缓存的组件实例可能不会像重新创建的实例那样触发生命周期钩子,如onMounted,这可能会影响一些功能的正常运行。

路由缓存问题的解决方法

方案一:给router-view添加key

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

html 复制代码
 <!-- 添加key 破坏复用机制 强制销毁重建 -->
 <RouterView :key="$route.fullPath" />
 <!-- <RouterView /> -->
方案二:使用beforeRouteUpdate导航钩子

beforeRouteUpdate钩子函数可以在每次路由更新之前执行,在回调中执行需要数据更新的业务逻辑即可。或者使用beforeRouteUpdate导航守卫,取消导航。

模版:

javascript 复制代码
const User = {
    template: '...',
    async beforeRouteUpdate(to,from) {
        //对路由变化做出响应
        this.userData = await fetchUser(to.params.id)
    },
}

案例: vue-rabbit: Vue3组合式API小兔鲜项目

javascript 复制代码
import { getCategoryAPI } from '@/apis/category'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getBannerAPI } from '@/apis/home'
import GoodsItem from '../Home/components/GoodsItem.vue'
import { onBeforeRouteUpdate } from 'vue-router'
// 获取数据
const categoryData = ref({})
// 获取路由参数
const route = useRoute()
// console.log(route)
// 如果传了参数 就以传来的参数为准 如果没有 就以默认参数route.params.id
const getCategory = async (id = route.params.id) => {
  const res = await getCategoryAPI(id)
  categoryData.value = res.result
}
onMounted(() => {
  getCategory()
})
// 获取banner
const bannerList = ref([])
const getBanner = async () => {
  const res = await getBannerAPI({
    distributionSite: '2'
  })
  console.log(res)
  bannerList.value = res.result
}
onMounted(() => {
  getBanner()
})

// 目标:路由参数变化的时候 可以把分类数据接口重新发送
onBeforeRouteUpdate((to)=> {
  // console.log("路由变化了");
  // console.log(to);
  getCategory(to.params.id)
})
两种方案的选择

如果在意性能问题,则选择beforeRouteUpdate ,精细化控制。

如果不在意性能问题,选择key,简单粗暴。

相关推荐
超级大只老咪33 分钟前
字段行居中(HTML基础语法)
前端·css·html
IT_陈寒1 小时前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只1 小时前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience1 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹1 小时前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo1 小时前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse1 小时前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye1 小时前
前端架构师,是架构什么
前端·架构
全马必破三1 小时前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库1 小时前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库