vue keep-alive保存路由状态1 (接下篇)
本文很长,但是很详细,请耐心看完就一目了然了有下篇
keep-
alive
是 Vue 内置的一个组件,使被包含的组件保留状态,或避免重新渲染。
1. 基础用法,缓存所有路由:
<keep-alive>
<router-view>
<!-- 这里是会被缓存所有的视图组件 -->
</router-view>
</keep-alive>
如果想要单一缓存一个怎么办呢?看下面
2. 初级用法,缓存指定路由:
vue 2.1.0后提供了include/exclude
两个属性: 下图为官方用法:
include - 字符串或正则表达,只有匹配的组件会被缓存
exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
// 组件 a
export default {
name: 'a',//先定义好组件名字 才能被缓存
data () {
return {}
}
}
<keep-alive include="a,b">
<router-view>
<!-- name 为 a以及b 的组件将被缓存! -->
</router-view>
</keep-alive>
<keep-alive exclude="a">
<router-view>
<!-- 除了 name 为 a 的组件都将被缓存! -->
</router-view>
</keep-alive>
3. 进阶用法,结合vue-router 缓存指定路由:这里包含两个用法方式,也可以一块用,看个人习惯了,我偏向用 路由meta控制
方式1:路由表meta + 公共main组件判断
//修改1.在路由表js 增加 router.meta 属性
// routes 配置
export default [
{
path: '/home',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/edit,
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
//修改2.在公共main组件修改 下面是组件里的代码
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里加载会被缓存的视图组件,比如 Home! -->
</router-view>
</keep-alive> <router-view v-if="!$route.meta.keepAlive">
<!-- 这里加载不被缓存的视图组件,比如 Edit! -->
</router-view>
//修改3.在
方式2:路由表meta + 组件内设置name属性
//修改1.在路由表js 增加 router.meta 属性
// routes 配置
export default [
{
path: '/home',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/edit,
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
//修改2.在要缓存的组件 设置那么属性
// 组件 a
export default {
name: 'home',//先定义好组件名字 才能被缓存
data () {
return {}
}
}
4.高级用法,指定从什么组件进入才缓存,以及销毁缓存:先介绍我发现的网上一些博主写的有bug的方法,在介绍自己的方法。
vue keep-alive保存路由状态1 (接下篇)的更多相关文章
- vue keep-alive保存路由状态2 (高级用法,接上篇)
接上篇 https://www.cnblogs.com/wangmaoling/p/9803960.html 本文很长,请耐心看完分析. 4.高级用法,指定从什么组件进入才缓存,以及销毁缓存:先介绍我 ...
- 056——VUE中vue-router之路由参数的验证处理保存路由安全
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue(三)之前端路由
01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...
- vue组件,axios ,路由
组件(Component)自定义封装的功能. 把一个功能相关的[HTML.css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”. 组件就是一个html网页中的功 ...
- 巧用location.hash保存页面状态
在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果 ...
- JMeter 怎么保存登录状态
在Recording Controller中添加一个HTTP Cookie Manager Recording Controller右键-->add-->config element--& ...
- vue学习记录④(路由传参)
通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...
- cookie和session的区别,分布式环境怎么保存用户状态
cookie和session的区别,分布式环境怎么保存用户状态 1.cookie数据存放在客户的浏览器上,session数据放在服务器上. 2.cookie不是很安全,别人可以分析存放在本地的COOK ...
- vue生成路由实例, 使用单个vue文件模板生成路由
一.vue-loader与vue-router配合 $ cnpm install vue-router --save 二.生成vue-webpack模板 $ vue init webpack-simp ...
随机推荐
- 【转】用CocoaPods做iOS程序的依赖管理 -- 不错
原文网址:http://blog.devtang.com/2014/05/25/use-cocoapod-to-manage-ios-lib-dependency/ 文档更新说明 2012-12-02 ...
- Docker运行程序报错 WARNING: IPv4 forwarding is disabled. Networking will not work
WARNING: IPv4 forwarding is disabled. Networking will not work. 第一步:vi /usr/lib/sysctl.d/00-system ...
- C#对 Json的序列化和反序列化时出现“k_BackingField”
在C#2.0的项目中,以前经常使用Json.NET实现序列化和反序列化.后来从c#3.0中开始使用新增的DataContractJsonSerializer进行json相关的操作.微软提供的原生类库使 ...
- Oracle PL/SQL开发基础(第三十三弹:EXCEPTION_INIT)
如果有一些异常并没有异常名称,比如一些ORA-开头的异常并没有一个友好的预定义的异常定义,此时在WHEN子句中无法使用具体的异常名称,必须要使用OTHERS异常处理器进行捕捉.通过EXCEPTION_ ...
- C++利用函数模板得到数组的长度
#include<iostream> template <typename T, int N> int ArraySize (T (&arr)[N]) { //此处是数 ...
- Kattis -I Can Guess the Data Structure!
I Can Guess the Data Structure! There is a bag-like data structure, supporting two operations: 1 x1 ...
- Java语言特点与学习
Java语言是一款面向对象的一款高级语言是由Sun Microsystems公司(现已被oracle公司收购).由James Gosling和同事们共同研发,并在1995年正式推出,据oracle官方 ...
- Codeforces Round #499 (Div. 2) C.FLY 数学推导_逆推
本题应该是可以使用实数二分的,不过笔者一直未调出来,而且发现了一种更为优美的解法,那就是逆推. 首先,不难猜到在最优解中当飞船回到 111 号节点时油量一定为 000, 这就意味着减少的油量等于减少之 ...
- JSP获取json格式的数据报错 Uncaught SyntaxError: Unexpected identifier
后台json字符串是 {"id":"cmdb_ci.`fully_qualified_domain_name`","field":" ...
- laravel报错:Unable to detect application namespace.
使用报错:Unable to detect application namespace. 是conposer.json格式不对