Vue 二级路由+keep-alive 切换时保存组件状态

1. 准备：

vue3 + vue-router

2. 项目结构：

准备好页面，以及两个需要切换的组件(可以放在pages文件夹中，毕竟是路由组件了)。

3. router.js内容:

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    component: () => import("@/pages/MainPage.vue"),
  },
  {
    path: "/second",
    component: () => import("@/pages/SecondPage.vue"),
    children: [
      {
        path: "/second/panel",
        component: () => import("@/components/HelloWorld.vue"),
      },
      {
        path: "/second/panel2",
        component: () => import("@/components/SecondComp.vue"),
      },
    ],
  },
];

export default createRouter({
  history: createWebHistory(),
  routes: routes,
});

 4. router引入main.js：

import router from "@/router/index";

createApp(App).use(router).mount("#app");

5. 一级路由准备:

App.vue：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view></router-view>
</template>

注意，vue使用的是vue3（未使用ts）

6.根据在router.js中的路由配置，在一级路由页面下写二级路由跳转的link，，以及接收跳转的view，如下是pages/SecondPage.vue：

<template>
  <div>
    <span>2222</span>
    <br />
    <router-link to="/second/panel">hello</router-link>
    &nbsp;
    <router-link to="/second/panel2">world</router-link>

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

7. 查看效果:

 

二级路由实现，但此时进行切换，会将状态重置。

8. 对router-view使用keep-alive

 修改SecondPage.vue:

<template>
  <div>
    <span>2222</span>
    <br />
    <router-link to="/second/panel">hello</router-link>
    &nbsp;
    <router-link to="/second/panel2">world</router-link>

    <!-- 修改此处 -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

9. 最终结果:

 

改变其中一个组件状态:
 

第二个组件输入状态也不会变: