脚本宝典收集整理的这篇文章主要介绍了有关vue 组件切换,动态组件,组件缓存，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
背景：
- 在组件化开发模式下，我们会把整个项目拆分成很多组件，然后按照合理的方式组织起来,达到预期效果
- 因为页面是多组件组织起来的,这时候自然就存在组件之间的切换问题，Vue中也提出了动态组件的概念,使得我们可以更好的实现组件之间的切换效果 , 但是vue中组件的切换实际是组件本身重新创建和销毁的过程,在某些场景下我们并不希望组件被重新创建重新渲染
实际场景: 用户操作 列表页-->详情页-->列表页 此时需要达到的预期效果是用户从详情页切换回列表页的时候原来的页面保持不变,而不是重新渲染,此时就需要在用户从列表页切换到详情页的时候对原来的列表页进行缓存
本文主要介绍Vue中组件的切换以及缓存解决方法
// 变量flag为true时显示comp-a组件 ,相反则显示comp-b组件 <comp-a v-if="flag"></comp-a> <comp-b v-else></comp-b>
// 点击切换登录,注册,退出组件
<template>
<div>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">登录</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.PRevent="comName = 'register'">注册</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'LOGOut'">退出</a>
// <component></component> 来展示对应名称的组件,相当于一个占位符
// :is 属性指定 组件名称
<component :is="comName"></component>
</div>
</template>
// 路由规则:
{
path: '/login',
name: 'login',
component: () => import('../views/login.vue')
},
{
path: '/register',
name: 'register',
component: () => import('../views/register.vue')
},
// 需要展示组件的位置:
<router-view />
根据需求对组件缓存,而不是销毁重建,正如本文开篇举例的实际场景
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行 。
activated
在 keep-alive 组件激活时调用 该钩子函数在服务器端渲染期间不被调用
deactivated
在 keep-alive 组件停用时调用 该钩子在服务器端渲染期间不被调用
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated@H_126_135@
使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。
注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。
设置了缓存的组件：
beforeRouterEnter ->created->…->activated->…->deactivated> beforeRouteLeavebeforeRouterEnter ->activated->deactivated> beforeRouteLeaveinclude - 字符串或数组,正则表达式。只有名称匹配的组件会被缓存-->include的值为组件的name。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件。
<template>
<div>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">登录</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">注册</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">退出</a>
// login组件会被缓存 不设置include会默认缓存所有挂载到<component></component>的组件
// 缓存多个指定组件include = ['login','register']
<keep-alive include="login">
<component :is="comName"></component>
</keep-alive>
</div>
</template>
需配置路由meta信息的keepAlive属性
keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些
{
path: '/login',
name: 'login',
component: () => import('../views/login.vue')
meta:{
keepAlive : true // login组件会被缓存
}
},
{
path: '/register',
name: 'register',
component: () => import('../views/register.vue'),
meta:{
keepAlive : false // register组件不会被缓存
}
},
<router-view />:
<div id="app">
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"> </router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"> </router-view>
</div>
// beforeRouteLeave()钩子 // 判断是否要到详情页 beforeRouteLeave(to, From, next) { if (to.path === "/goods_detail") { from.meta.keepAlive = true; } else { from.meta.keepAlive = false; // this.$destroy() } next(); }
到此这篇关于有关vue 组件切换,动态组件,组件缓存的文章就介绍到这了,更多相关vue组件切换,动态组件,组件缓存内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的有关vue 组件切换,动态组件,组件缓存全部内容，希望文章能够帮你解决有关vue 组件切换,动态组件,组件缓存所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。