vue3 路由 组件缓存（和vue2的区别）

最新项目一直在用vue3来研发，发现了很多和vue2不同的地方，今天这个是路由 组件缓存的不同

路由配置

const Home = () => import('../views/Home/Home.vue')
const routes = [
  {
    path: '/',
    name: 'main',
    component: Main,
    redirect: '/Home',
    children: [
      {
        path: 'Home',
        name: '首页',
        component: Home,
      },
    ]
  }
]

在app.vue中进行配置<router-view />

在初始化vue页面配置页面缓存。 下面是vue3实现页面缓存写法

这种是默认缓存全部的组件和路由

<router-view  class="content" v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

如果需要只缓存某个组件或者某个组件不缓存就要结合include和exclude属性

<router-view class="content" v-slot="{ Component }">
  <keep-alive :include="aliveComponent">
     <component :is="Component" />
  </keep-alive>
</router-view>

computed: {
    aliveComponent () {
      return ['BasketballProgram', 'Home'] // 对应子组件name
    }
}

export default {
  name: "Home",
  data() {}
}

我这边需要缓存的组件比较少，我就这样直接写了，也可以结合vuex和路由
配置
meta: {
keepAlive: true
}
来实现更完整的组件缓存方法。
相比vue2 语法上有了明显变动，性能和缓存上也有了很大提升和优化，如果是嵌套子路由的同样适用

vue2实现页面缓存写法为

// 1
<keep-alive>
    <router-view/>
</keep-alive>   

// 2
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>