Vue路由缓存问题

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

路由缓存问题的产生

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

路由缓存带来的问题 

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

路由缓存问题的解决方法 

 方案一:给router-view添加key

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

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

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

模版: 

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

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

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,简单粗暴。文章来源地址https://www.toymoban.com/news/detail-835643.html

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue前端 更具router.js 中的meta的roles实现路由卫士,实现权限判断。

    参考了之篇文章 1、我在登陆时获取到登录用户的角色名roles,并存入sessionStorage中,具体是在login页面实现,还是在menu页面实现都可以。在menu页面实现,可以显得登陆快一些。 2、编写router.js,注意,一个用户可能有多个角色。 这里有个bug 我们的roles存在sessionStorage中,关闭

    2024年02月13日
    浏览(46)
  • 编程式导航、缓存路由组件、路由守卫、Vue UI组件库【VUE】

    作用:不借助 router-link 实现路由跳转,让路由跳转更加灵活 具体编码: 作用:让不展示的路由组件保持挂载,不被销毁 具体编码: 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。 具体名字: (1)activated路由组件被激活时触发 (2)deactivated路由组件失

    2024年02月03日
    浏览(53)
  • Vue缓存路由组件

    作用:让不展示的路由组件保持挂载,不被销毁

    2024年02月12日
    浏览(37)
  • Vue Router 路由动态缓存组件

    Vue Router 允许你缓存路由组件,这样在用户导航回之前的页面时,组件的状态会被保留而不是重新渲染。这可以通过使用 keep-alive 组件来实现。 keep-alive 是一个内置抽象组件,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 它的主要作用是缓存不活动的组件实例,

    2024年04月16日
    浏览(36)
  • Vue的多级路由实现缓存处理

    代码如下: 需要在路由前置守卫调用handleKeepAlive () 注意:多级路由出口为位置增加name=‘layout’,就可以实现多级路由的缓存

    2024年02月11日
    浏览(37)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(63)
  • 前端缓存方式以及区别(vue项目)

           vuex、cookie、sessionStorage、localStorage vuex主要用于vue 组件之间的通信,页面一刷新数据就会消失。 原因:        vuex 是挂载到vue实例上的,相当于全局变量,当页面一刷新,页面重新加载vue 实例,vuex里面的数据被重新赋值。 使用: https://vuex.vuejs.org/zh/ 一般结合

    2024年04月14日
    浏览(63)
  • IIS部署vue前端过程(含IIS及相关配置和安装),部署遇到的问题及报错(承接vueconfig.js全局配置环境变量,跨域问题)

    目录 一.IIS使用安装。 二.部署准备工作 三.部署前端(以vue为主) 四.问题与报错 1.HTTP 错误 404.0 - Not Found(需重写路由入口) 2.请求调用不了(需要重写请求地址) 3.地址显示undefined 第一步,打开“ 控制面板 ”,点击“ 网络和Internet ”。 第二步,点击左侧“ 程序 ”,然后点击

    2024年02月08日
    浏览(69)
  • 清除引入js缓存,vue切换页面重新加载

    require引入的js require.cache删除js缓存

    2024年02月16日
    浏览(49)
  • 【前端】Vue 部署上线清除浏览器缓存的方式

    修改根目录index.html 在 head 里面添加下面代码 1 2 meta http-equiv = \\\"pragram\\\" content = \\\"no-cache\\\" meta http-equiv = \\\"cache-control\\\" content = \\\"no-cache, no-store, must-revalidate\\\"   配置 nginx 不缓存 html vue默认配置,打包后css和js的名字后面都加了哈希值,不会有缓存问题。但是index.html在服务器端可能是有

    2024年02月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包