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>