W250511/17.Vue3/project2/src/views/List.vue

<template>
  <div>
    <h1>list</h1>
    <div class="nav">
      <!-- 声明式导航 -->
      <RouterLink active-class="old" to="/list/demo1">Demo1</RouterLink>
      <RouterLink active-class="old" to="/list/demo2">Demo2</RouterLink>
    </div>
    <button @click="goHome">回主页</button>

    <RouterView v-slot="{Component,route}">
      <KeepAlive> 
        <component :is="Component" v-if="route.meta.isKeep"></component>
      </KeepAlive>
        <component :is="Component" v-if="!route.meta.isKeep"></component>
    </RouterView>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import Demo1 from "./Demo/Demo1.vue";
import { RouterLink, RouterView, useRouter } from "vue-router";
const router = useRouter();
function goHome() {
  // router.push('/home');
  // router.go(-1);
}
</script>

<style  scoped>
.old {
  color: pink;
}
</style>