keep-alive实现路由缓存,数据停留

情景

当我们在跳转另一个页面后返回时，希望当前页面的数据还在，保持跳转时的状态，这个时候我们就可以用vue中的 keep-alive 来实现一个数据持久化

Suspense

自带两个 slot 分别为 defalt、fallback 。当要加载的组件不满足状态是，Supense将加载 fallback 状态，反之

router-view

内置 Component、Route 两个属性，Component 是要渲染的组件，Route 简析出的标准化路由对象

component

component 标签是vue自定义的标签，他主要用来实现动态绑定组件，根据数据的不同跟换不同的组件，通过 is 属性渲染，

<template>
  <section id="app">
    <Suspense>
      <template #default>
        <router-view v-slot="{ Component, route }">
          <transition>
            <div>
              <keep-alive>
                //利用route.meta 这的数据来判断是否进行缓存
                <component :is="Component" :key="route.path" v-if="route.meta.keepAlive" />
              </keep-alive>
              <component :is="Component" :key="route.path" v-if="!route.meta.keepAlive" />
            </div>
          </transition>
        </router-view>
      </template>
      <template #fallback>Loading...</template>
    </Suspense>
  </section>
</template>

Router配置

在 router 中我们需要在 meta 中配置用来判断是否缓存的变量，我是通过 meta 中的 keepAlive 来进行判断的，配置完成后就 Over 了

  {
    path: '/',
    name: 'home',
    meta: {
      title: '首页',
      //是否缓存
      keepAlive: true
    },
    component: () => import('@/views/home.vue')
  },
  {
    path: '/login',
    name: 'login',
    meta: {
      title: '登录',
      //是否缓存
      keepAlive: false
    },
    component: () => import('@/views/login.vue')
  },