vue2[初级] 路由缓存配置

最新推荐文章于 2024-04-18 16:47:16 发布
最新推荐文章于 2024-04-18 16:47:16 发布
阅读量303 收藏
点赞数
分类专栏： VUE WebStorm2022 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011664286/article/details/127031727
版权

本节内容

路由缓存配置

案例

– 当一个页面中存在多个tab页时 通过路由配置 每次切换时都会销毁之前的路由访问 此时切换之前的tab中input框内容无法保存下来，如果想多个tab最后一起提交数据时 需要使用路由缓存 防止路由访问被销毁而数据清空

使用方式

– 使用方式比较简单 只需要在父菜单上添加keep-alive标签即可
– 例如 菜单1下的所有子菜单中input框内容在切换时不清空 那么只需要在菜单1的router-view前包一层keep-alive就可以了 如下图
在这里插入图片描述
注意 如果多个父菜单(一级菜单)下的所有输入框都不想被清空 那么需要在APP.vue中的router-view前包一层keep-alive标签

ejokovic
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2中组件的缓存
weixin_45724850的博客
07-15 1318
动态组件是指在Vue.js中可以根据条件或事件的变化，动态地切换渲染不同的组件。这样可以根据需要来加载不同的组件，并且可以提高代码的复用性和灵活性。只会对动态组件或手动设置了名称的组件进行缓存。包裹的组件在切换时会被缓存下来，而不会重新渲染和销毁。这样可以提高性能，避免重复的创建和销毁组件。动态组件的使用可以让我们根据不同的条件或事件来动态加载不同的组件，实现更灵活的界面交互和代码复用。是一个动态属性，根据其值的变化来动态渲染对应的组件。的值，以实现动态切换组件的效果。组件来实现组件的缓存。
关于vue2动态路由进行页面缓存的方法
jtfyh的博客
05-23 617
其中$route.的属性 应为唯一值 不知道的话可以在该页面使用。在router-view标签上设置key key设置为唯一值。来查看当前路由对象属性。
Vue 可配置化的路由缓存（Vu2 & Vue3）
qq_44212319的博客
02-11 1413
Vue 可配置化的路由缓存（Vu2 & Vue3）
Vue2组件的生命周期及缓存路由（keep-alive）
最新发布
qq_60654563的博客
04-18 1176
Vue2组件的生命周期
vue2中使用keep-alive缓存router-view组件的3种方法
yhlhelloworld的博客
03-30 5683
首先先了解一下什么是keep-alive keep-alive:vue内置组件，包括不活动的实例;dom结构移除了； 但是组件的实例没有被销毁；而是缓存起来了；注意：缓存的是组件的实例 1. 包括组件 2. 包括路由的坑 router-view 它有3个属性 分别是： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。...
【Vue】Vue2.0页面缓存和不缓存的方法，以及watch监听会遇到的问题
热门推荐
时间飞逝的博客
03-26 1万+
vue2.0页面缓存和不缓存的方法，以及watch监听会遇到的问题
Vue2/3路由缓存、-路由监听、-常见路由守卫
Climber_fe的博客
07-20 1984
在意性能问题，选择onBeforeRouteUpdate,精细化控制。复用导致生命周期不执行,onMounted不执行,新请求无法发送。路由缓存 —当路由只有参数变化时,会复用组件实例。不在意性能问题，选择key,简单粗暴。我欲乘风归去，又恐琼楼玉宇。
vue spa应用中的路由缓存问题与解决方案
10-16
在Vue的SPA（单页面应用）中，路由缓存是一个重要的优化策略，它能提高用户体验，尤其是在处理大量的数据列表和复杂交互时。由于浏览器默认并不会为单页面应用的路由变化保留状态，每次切换路由，组件都会重新加载和...
vue路由缓存的几种实现方式小结
12-28
本文实例讲述了vue路由缓存的几种实现方式。分享给大家供大家参考，具体如下： 在我们的日常开发中，有时候会遇到页面的缓存，特别是电商的项目，在商品列表的一些状态都是要缓存下来的。 下面就简单介绍几种 vue ...
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
10-14
主要介绍了vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于vue路由缓存清除在main.js中的设置
12-13
/* 页面数据缓存 */ var _CACHE_OBJS = {}; function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { comp[key] = obj; } var deep = typeof comp[key] === 'object'; comp...
Vue动态路由缓存不相互影响的解决办法
10-17
主要介绍了Vue动态路由缓存不相互影响的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue2进阶篇：vue-router之缓存路由组件
刘大猫
07-09 2068
vue2进阶篇：vue-router之缓存路由组件
Vue中路由缓存及activated与deactivated的详解
zxdznyy的博客
02-09 3429
在Vue的使用中，为了提高应用的效率，我们可以使用路由缓存这方面的相关知识来解决遇到的问题。本博客的内容则是对路由缓存及activated与deactivated的详解。期望能对读者有所帮助。本篇博客需要有对路由相关知识的了解，如需复习可见博客Vue2路由的详细讲解。这里要介绍两个钩子函数（生命周期函数）：activated与deactivated。这两个是专门用于路由组件的函数。先介绍一下：activated，可译为”激活的“，路由组件从未出现到出现时运行。
vue2处理keep-alive对多级路由缓存，以及清除缓存的总结
cyril_96的博客
09-04 6313
1. 菜单页面的多级缓存 2. keep-alive通过include与key的更新无法清除旧的缓存 3. 三级路由切换到二级路由页面时，清除没有生效(菜单点击至二级页面仍是缓存页面)
Vue2（完结）：replace属性、编程式路由导航、缓存路由组件、两个新钩子、路由守卫、history与hash
Hdhhdhbsjxbdhvyg的博客
04-02 2557
1、作用：控制路由跳转时操作浏览器历史记录的模式2、浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push3、如何开启replace模式：<router-link replace .......>News</router-link>push是默认模式，可以前进后退，相当于指针指前面还是后面，而replace是指针指哪个就把它之前那个抹掉，就不能后退了。
Vue2项目页面缓存
qq_43587616的博客
05-15 1266
例如：在vue项目中，经常会出现分页列表以及详情页，从列表中进入详情页之后再返回列表页，会导致列表页面的刷新，这是我们的分页和页面滚动距离就会回到起点，这显然是不方便的，如何解决这个问题呢？当组件在内被切换，它的activated和这两个生命周期钩子函数将会被对应执行。include和exclude允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。匹配首先检查组件自身的name选项，如果name选项不可用，则匹配它的局部注册名称 (父组件components选项的键值)。
Vue中嵌套二级路由组件缓存,路由组件缓存失败,可能是没有在在export default{}中添加name:‘路由组件名‘属性
m0_57747266的博客
06-14 385
考虑到它是二级组件，所以我先第一步缓存一级路由组件,在一级<router-view>上的keep-alive中的include包含一级组件名称。即我即在一级的keep-alive上的include中添加了对应的组件名也在二级keep-alive中添加了二级路由组件的名称都没有办法,缓存对应的二级组件。于是我给需要缓存的二级组件的父级路由组件export了对应的name设置为路由组件名称就可以了。最后我发现我的一级路由组件和二级路由组件都没有export组件的name,直接使用二级组件的路由名称没用。
vue2路由缓存数据
08-05
在Vue.js2中，你可以使用Vue Router提供的路由缓存功能来缓存页面数据。以下是一种常见的实现方式： 1. 首先，在路由配置中，为需要缓存的路由添加一个`meta`字段，例如： ```javascriptconst routes = [ { path:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值