VUE路由页面的保活机制(移动端可以实现点击后退详情页还在)

还在)"/>

VUE路由页面的保活机制(移动端可以实现点击后退详情页还在)

对于移动端 vue 项目, 可能需要实现一个场景: A 页面跳转到 B页面后, 当在 B页面中点击返回 回到A页面时, 需要保持 A页面的原始状态, 而不是重新加载A页面.

而默认情况下, 当 VUE的路由返回上一页时, 将会重新调用组件的生命周期,重新挂载.

(mounted 将会被调用)

此时就需要利用 vue的保活机制 (keepAlive) 来实现组件原始状态的保持

<template><div><keep-alive><router-view /></ keep-alive></div>
</ template>

那么必然会遇到一个场景: 有的路由需要保活 有的则不需要保活

所以需要第一步给需要保活的路由设置自定义属性

meta:{keepAlive:true, //自定义属性,通过改属性动态设置保活}

第二步: 加判断

<template><div id="app"><!-- 顶部 --><keep-alive ><router-view v-if="$route.meta.keepAlive" /></keep-alive><router-view v-if="!$route.meta.keepAlive" /></div>
</template>