实现a页面 跳到 b页面 ,b页面 后退到a页面 a页面不刷新效果
此功能的实现需要使用路由生命周期 beforeRouteLeave()
一. 首先在router中对需要缓存的a页面进行缓存
{
path: 'UAssistant',
name: 'UAssistant',
component: UAssistant,
meta:{
keepAlive:true //需要进行缓存的路由
}
},
二.然后在入口App文件进行缓存视图组件
<template>
<div id="app">
<keep-alive> //用keep-alive进行缓存
<!--缓存视图组件-->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
三.之后在b页面进行路由生命周期钩子函数的实现
export default {
name: 'UAbout',
beforeRouteLeave(to, from, next) {
to.meta.keepAlive = true;
next()
},
}
网友评论