vue中keep-alive使用

Vue路由缓存与组件间通信

最新推荐文章于 2023-04-20 10:18:13 发布

原创最新推荐文章于 2023-04-20 10:18:13 发布 · 337 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在Vue项目中通过配置路由缓存来提高用户体验，并利用eventBus实现非父子组件间的通信，确保在页面跳转时能正确传递数据。

首先在router中配置当前路由是否被缓存

{
path: '/demo1',
name: 'demo1',
meta: {
keepAlive: true // 需要缓存
},
component: resolve => { require(['../view/demo1.vue'], resolve) }
},
{
path: '/demo2',
name: 'demo2',
component: resolve => { require(['../view/demo2.vue'], resolve) },
meta: {
keepAlive: false // 不需要缓存
}

在app.vue中设置缓存的router-view

<keep-alive>
<router-view v-if="$route.meta.keepAlive" class="ui-view" :transition="effect" transition-mode="out-in"></router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive" class="ui-view" :transition="effect" transition-mode="out-in"></router-view>

目标：从demo1跳转到demo2 从demo2传值到demo1这时demo1的created是不会触发的

keep-alive提供了2个方法

activated: function () {
   // 当组件被缓存时  created不会触发  此时activated会触发

},
deactivated: function () {
      
}

// 传值可以使用vuex 或者使用公共的bus

eg: eventBus.js

import Vue from 'vue'

/**
 * 定义空的vue实例，作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast)
 */
var eventBus = new Vue({})
export default eventBus

在需要的页面引入 demo2

import enentBus from '.eventBus.js'

enentBus.$emit('add','11212')
 /调用router回退页面
this.$router.go(-1);  // 在这里为什么使用回退  因为安卓不好监听这个页面回退 所以前端处理比较好 

demo1

activated (){
        enentBus.$on('add',function(data){
            this.searchParams = data;  // this.searchParams 是我在data定义的值 当从demo2跳转到demo1时会触发这个生命周期钩子
        }.bind(this))
 
    }