1.在app.vue中用一个 <keep-alive> 元素将其动态组件包裹起来:

keepAlive为true时,第一次被创建的时候缓存下来,为false时,不会缓存
<keep-alive>
<router-view
v-if="$route.meta.keepAlive"
:key="$route.path"/>
</keep-alive>

2.在routes.js为每个模块定义是否在内存常驻中:

 {
path: '/test',
name: 'test',
component: require('@views/test').default,
// 下行代码为按需加载的写法
// component: () => import('@views/test1'),
meta: {
authRequired: true,
// 下行代码为true的时候,该模块常驻内存
keepAlive: false,
},
},
3.在main.js中引入app.vue与routes.js:
import App from './app'
import router from '@router' new Vue({
router,
render: h => h(App),
}).$mount('#app')
												

[Vue]组件——实现动态组件:keep-alive的使用的更多相关文章

  1. Vue.js的动态组件模板

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...

  2. Vue两种组件类型介绍:递归组件和动态组件

    一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...

  3. Vue 组件4 动态组件

    动态组件 通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...

  4. Vue组件的操作-自定义组件,动态组件,递归组件

    作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...

  5. Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用

    一.组件 1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效): html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 - ...

  6. Vue基础之 动态组件

    为什么会有动态组件> vue 通过组件机制 实现的页面功能的模块化处理,通常情况下 我们在vue中使用组件  就是先定义组件 然后再需要的地方 插入组件即可 但是在某些情况下 需要根据不同的需求 ...

  7. Vue_(组件通讯)动态组件结合keep-alive

    keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...

  8. Vue_(组件通讯)动态组件

    动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...

  9. Hibernate学习---第五节:普通组件和动态组件

    一.普通组件映射配置 1.创建组件类,代码如下: package learn.hibernate.bean; /** * 组件类 */ public class Phones { private St ...

随机推荐

  1. python爬虫 (一) 爬虫基础了解,urllib

    • URL的含义: 统一资源定位符,结构: URL的格式由三部分组成: ①第一部分是协议(或称为服务方式). ②第二部分是存有该资源的主机IP地址(有时也包括端口号). ③第三部分是主机资源的具体地址 ...

  2. python学习笔记(二十四)继承与封装

    继承(extends)就是把多个类中相同的成员给提取出来定义到一个独立的类中,然后让这多个类和该独立的类产生一个关系,这多个类就具备了这些类容,这个关系就叫做继承. 实现继承的类称为子类,也叫派生类, ...

  3. 马尔可夫随机场(Markov random fields) 概率无向图模型 马尔科夫网(Markov network)

    上面两篇博客,解释了概率有向图(贝叶斯网),和用其解释条件独立.本篇将研究马尔可夫随机场(Markov random fields),也叫无向图模型,或称为马尔科夫网(Markov network) ...

  4. php微信支付接口开发程序(流程已通)

    php微信支付接口开发程序(流程已通) 来源:未知    时间:2014-12-11 17:11   阅读数:11843   作者:xxadmin [导读] 微信支付接口现在也慢慢的像支付宝一个可以利 ...

  5. Google:移动端搜索正式上线移动友好标签

    Google移动端搜索正式上线“Mobile-Friendly”(移动友好)标签,并宣布如果卖家网站上没有移动友好标签或者错误地设置移动友好标签,那么卖家的网站将被降级. Google表示目前常见的智 ...

  6. SQL Server outer apply 和 cross apply

    先说点题外话,因为后面我会用到这个函数. 前两天自定义了一个 sql 的字符串分割函数(Split),不过后来发现有点问题,例如: select * from Split(default,'123,4 ...

  7. 5-es6的模块化开发与其它的不同

    1.加载机制不同es是静态加载,其它是动态加载.Es6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量.CommonJS 和 AMD.CMD 模块,都只能在运行 ...

  8. Kafka(一)

    1.安装zookeeper集群 2.下载kafka    wget http://mirror.bit.edu.cn/apache/kafka/1.0.0/kafka_2.11-1.0.0.tgz 配 ...

  9. $思维导图——numpy基本知识

  10. VSYNC与HSYNC与PCLK与什么有关系

    在手机平台,LCD,Camera,TV的接线上,都会用到PCLK,VSYNC和HSYNC这三个信号.可见这三个信号和显示关系非常大.首先我们先看这三个信号的作用: PCLK:有些方案给他起名字叫:Do ...