vue 返回上一页 页面不刷新 keep-alive

文章目录

• keep-alive 将页面缓存 返回时页面不刷新问题
• 解决办法

<---------------------------------假装分割--------------------------------->

keep-alive 将页面缓存 返回时页面不刷新问题

这样一些功能模块，是一个组件，当选中的时候跳转到下一个页面去

返回的时候页面没有保存之前的状态
返回后：

解决办法

<keep-alive>

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和

<transition>

相似，

<keep-alive>

是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

当组件在

<keep-alive>

内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

1. 路由配置

在需要缓存的组件路由中 添加路由元 配置 keepAlive属性(名字随意)， 我这儿 设置值为true

{
path: 'stepStore',
component: stepSecond,
meta: {
keepAlive: 'true'
}

1. 路由选项

// keep-alive中为要缓存的 组件
<keep-alive>
// keepAlive 为true走这个
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
// keep 为false 走这个
<router-view v-if="!$route.meta.keepAlive"></router-view>

1. 路由守卫
   使用路由守卫 来更改 meta 的内容来实现

beforeRouteLeave: (to, from, next) => {
// 如果跳转的页面为/setting/stepStore 就将keepAlive设置为true就走缓存了组件那一步
if (to.path === '/setting/stepStore') {
to.meta.keepAlive = true
} else {
// 否则keepAlive设为 false
to.meta.keepAlive = false
}
next()
}

这个非常有用，先码在这！

• 点赞
• 收藏
• 分享
• 文章举报

郭治涛-Theo 发布了44 篇原创文章 · 获赞 23 · 访问量 906 私信 关注