vue单页 <keep-alive>
开发经常遇到的情况,在查询页输入查询条件后,点击查询结果进入到详情页,再返回就没有之前输入的查询条件了,除了vuex的state,还可以用<keep-alive>解决
<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
App.vue文件有一段代码,这是页面渲染的地方
<router-view></router-view>
把这段代码改成
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
我们能看到这段代码做的逻辑判断,当路由的meta属性的keepAlive属性值为true时页面的状态保存,其他情况下不保存状态。
然后就是给我们路由设置keepAlive属性值
{ name: 'index', path: '/index', title: '主页', component(resolve) { require(['views/index.vue'], resolve) }, meta: { pageTitle: '主页', keepAlive: true } }
这样就有一个问题
从主页跳到任何页面,再返回主页都不会刷新页面!这并不是我想要的,我只要从详情页返回列表页时不刷新页面,其他情况下是需要刷新的,那么我就需要定制化处理了。大致思路就是从主页跳转到其他页面时把主页的keepAlive值设置为false,从详情页返回主页时把主页的keepAlive值设置为true就好了,代码如下:
主页跳转到其他页面时把主页的keepAlive值设置为false
export default { data() { return { }; }, mounted() { }, methods: { }, //修改列表页的meta值,false时再次进入页面会重新请求数据。 beforeRouteLeave(to, from, next) { from.meta.keepAlive = false; next(); } };
从详情页返回主页时把主页的keepAlive值设置为true(要做个判断,判断是不是返回到主页的)
export default { data() { return { }; }, mounted() { }, methods: { }, beforeRouteLeave(to, from, next) { if (to.path == "/index") { to.meta.keepAlive = true; } else { to.meta.keepAlive = false; } next(); } };
还有一种办法
在需要跳转的页面写
<template> <div :class="['app-wrapper',getTheme]"> <app-header :userName="userName" :userType="userType" :class="$route.name==='home'?'app-home':'app-other'"></app-header> <div class="app-center" :class="$route.name==='home'?'app-home':''"> <keep-alive> <router-view v-if="$route.meta.keepAlive" class="main-wrapper"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive" class="main-wrapper"></router-view> </div> </div> </template>
const Router = [ // 定义路由 { name: 'home', path: '/home', component: Home }, { name: 'monitor', path: '/monitor', component: Monitor, meta: { keepAlive: true } } ]