keep-alive缓存组件使用(5)参数使用说明（meta使用）部分缓存，路由404，权限，重定向

最新推荐文章于 2023-10-20 09:00:00 发布
最新推荐文章于 2023-10-20 09:00:00 发布
阅读量438 收藏
点赞数
分类专栏： vue技能提升 文章标签： 缓存 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jieweiwujie/article/details/128465885
版权
本文介绍了Vue.js中keep-alive组件的meta使用，包括如何在路由上设置元信息以控制缓存，以及在beforeEach拦截器中进行权限判定、重定向和404页面处理。通过路由元信息可以实现部分页面缓存，避免直接访问子路由导致的权限问题。
摘要由CSDN通过智能技术生成

keep-alive缓存组件使用(4)参数使用说明（include，exclude，max）部分缓存_前端小云儿的博客-CSDN博客

这篇文章，依然是上面文章基础之上

路由元信息meta

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段：

1 需要在路由加上meta 路由元信息

每个路由的标识信息，是路由独有的一个信息，无论在路由中是否定义meta，在组件中都可以通

了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端小云儿
关注
专栏目录
订阅专栏
vue项目中keep-alive、meta的实际应用
weixin_44559272的博客
10-29 922
需求：司机库、企业信息管理、设备库三个模块的页面在数据详情页及数据操作页回退到列表页面可以保留用户之前的筛选状态，其他页面无需保留筛选状态 实现：用keep-alive包裹组件router-view，通过$route.meta的keepAlive属性区分需要缓存的页面 需要注意的点：v-if不能加在keep-alive上面会使缓存失效，可以加在router-view上或者在keep-alive上改用include，keep-alive是缓存不活动的组件实例（把router-view里的内容存在组件的dat
keep-alive缓存组件使用(6)参数使用说明：钩子周期函数（activated和deactivated）
jieweiwujie的博客
12-28 483
因此一个缓存页面，当有些数据不需要缓存，我们就可以使用这两个钩子函数处理。activated和deactivated
Vue3中使用keep-alive缓存组件
qq_51389038的博客
10-20 961
使用keepalive， 会增加activated和deactivated这两个生命周期钩子，unmouted不会再被触发，所以组件。在第一次渲染时，会此时组件，退出时会再次进入时，只会。
Vue动态路由匹配,keep-alive在路由中的使用,meta的使用(权限控制)
Mr.Zhang 努力奔跑!
03-12 1197
<!DOCTYPE html> <html lang="CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../vue/dist/vue.js"></...
Vue利用keep-alive实现页面缓存
Akony的博客
01-30 2271
从首页 -> 页面1，再从页面1 ->首页时，保证首页与离开时一样。（可以缓存具体组件，因项目不涉及，暂不说明） App.vue keep-alive> router-view v-if="$route.meta.keepAlive">/router-view> /keep-alive> router-view v-if="!$route.meta.keepAlive">/router-v
路由中meta自定义keepAlive属性
YingUser的博客
11-17 1591
Ps :活到老学到老，这里我主要是应用到了分页功能 点击看详情返回来的。2、在router.js中设置属性。1、给点击加上点击事件。
关于vue的keep-alive
liucai1018的博客
07-27 1231
一、keep-alive的作用： 1 具有缓存的作用 通过在router.js中的meta配置中添加keepAlive:ture来指定对哪个组件进行缓存 2具体加了这个有什么影响？ 由于加了keepAlive:true，则该组件被缓存到内存中，那么其他的钩子函数都将不会再执行，除了activated(进来) 和deactivated(离开)，这2个会相应执行，这2个钩子函数是专门for keep-alive的，因此如...
Vue-Router中使用keep-alive及在transition中的动画过度问题
Kyoku0604的博客
11-09 3158
当我们使用Vue来回切换页面，并希望保持页面组件状态的时候，会用到Vue的keep-alive抽象组件。以下为官网中的说明: <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 这里注意，必须包裹动...
vue生命周期、路由守卫、keep-alive
Darlingmi的博客
03-07 1420
vue路由守卫钩子函数~ 完整的生命周期~ keep-alive用法~
vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
weixin_33587161的博客
01-17 3353
一、使用情景在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，比如：在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的...
Vue3（撩课学院）笔记08-路由前置守卫，路由前置守卫设置元信息，路由后置守卫，keep-alive,一个路由tabbar案例，promise基本使用，链式调用，优化
weixin_43745804的博客
09-04 434
1、路由全局前置守卫 对符合条件的路由路径进行判断并决定是否放心 Router/index.js //引入路由 import {createRouter,createWebHashHistory} from 'vue-router' import Home from './../components/Home.vue' import Mine from './../components/Mine.vue' import News from './../components/News.vue' import
Vue中keep-alive的深入理解和使用
weixin_49790903的博客
04-18 233
什么是keep-alive? keep-alive是Vue提供给我们一个内置组件，他可以用来保存我们路由切换时组件的状态 组件使用keep-alive以后会新增两个生命周期 actived() deactived(), 我们在切换路由的时候，想保存组件的状态，比如列表页面进入详情，我们想保存列表滚动的位置，我们就可以使用keep-alive保存列表页面的滚动位置。 简单理解 当我们从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表
vue-router路由元信息meta及keep-alive组件级缓存
weixin_38203203的博客
08-05 1119
路由元信息？（黑人问号脸？？？）是不是这么官方的解释很多人都会一脸懵？那么我们说meta，是不是很多人恍然大悟，因为在项目中用到或者看到过呢？ 　　是的，路由元信息就是我们定义路由时配置的meta字段；那么这个meta的作用是什么呢？ 　　首先看一个场景： 　　　　通常我们在开发网站或者移动应用的时候，我们通常会有网页权限验证的需求（别说你没有，你肯定有），这种需求一般是指需要登录后才可进入，也就是需要用户登录获取用户Token或者用户信息之后才可进入；当这个需求下来的时候，我们作为前端开发人员的第一
vue 使用 keep-alive 需要注意的几个点
一人一城温一壶酒的博客
04-01 814
1、v-if="$route.meta.keepAlive" 需要放在router-view上，不能放在keep-alive上 <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view
谈谈404定时跳转等meta的解决方案
Focus-Fe
06-16 305
前言：           最近忙的已然很少能静下来写点什么，如果生活只剩下忙碌的工作，那样其实也就失去了它本身的意义。我是一个喜欢记录和回顾的人，这样让我对一些东西记忆的更深刻，前端的路要慢慢地走。                                                                                           ...
vue中得keep-alive组件得include属性绑定值注意事项
weixin_42159569的博客
05-28 2388
很多细节容易遗忘，所以需要记录一下。 keep-alive中include属性绑定得值 应该是vue页面得name，如下所示 // keep-alive 组件 include 两个页面 <keep-alive :include="[PageOne,PageTwo]"> <router-view :key="key" /> </keep-alive> // pageOne页面代码 <template> <div> pageOne页面 &l
vue实现keep-alive页面缓存【三步骤配置，一步到位】
在写作的路上持续输出。
09-07 3444
vue实现keep-alive页面缓存【三步骤配置，一步到位】
vue keep-alive的理解
weixin_47036542的博客
07-17 372
keep-alive是什么？ keep-alive是vue.js提供给我们的一个内置组件，它可以用来在路由切换的时候缓存组件的状态，包裹动态组件的时候，缓存不活动的组件实例，是缓存而不是销毁 我们来举一个例子吧 假如我们在浏览一个淘宝首页的时候，我们是一直往下浏览的，当我们看到一个商品，想进入详情页面看看这个商品的具体信息的时候，我们进入详情页面了，当我们退出商品详情页面之后，它现在的状态就是还在我们浏览的位置，这就是用了组件缓存 现在就来说一下它的用法 第一种：直接把<keep-alive>&
Vue keep-alive,同一个路由组件参数不同，如何分别缓存状态
lllomh的博客
11-02 4545
在实际开发中.会有这样的需求，从列表点击到详情，缓存数据。详情返回列表则保持滚动条位置，并且不再请求列表api！正常情况下 直接 加上<keep-alive> 即可，但是如果列表本身是带有参数的，那就不行了。一下为参数变化的实现方式！ demo请狠狠的戳这里https://download.lllomh.com/cliect/#/product/FA28111110405059 一：一样的是 在 路由表设置好标记 const routes = [ { path: '/...
vue3+ts项目使用keep-alive缓存组件实例，每个组件传递参数不同
最新发布
09-19
在Vue3项目中，结合TypeScript (TS)，如果你想利用`keep-alive`特性来缓存页面并复用已经创建的组件实例，特别是在路由跳转时传递不同参数的情况下，你可以这样做： 1. 安装和配置KeepAlive： 首先，你需要安装Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值