vue-routerAPP.vue路由注册 <router-view>: 这是Vue Router提供的一个组件，用于渲

APP.vue路由注册

<router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>

<router-view>: 这是Vue Router提供的一个组件，用于渲染与当前路由匹配的组件。当路由发生变化时，<router-view>会自动渲染新的组件。在实际应用中，路由配置中定义的组件会在这里被动态插入。
v-slot="{ Component }": 这是Vue 3中引入的具名插槽（scoped slots）。<router-view>默认会将匹配到的组件对象作为插槽内容传递出来，通过v-slot指令我们可以接收这个对象，并将其命名为Component。这样我们就可以在<router-view>内部使用这个Component对象，以更灵活的方式渲染组件。
<transition name="fade" mode="out-in">: 这是Vue提供的用于实现组件过渡动画的<transition>组件。name="fade"指定了过渡效果的名称，Vue会根据这个名称自动生成相关的CSS类名，用于控制动画效果。mode="out-in"表示在渲染新的组件之前，会先移除旧的组件，这样可以避免两个组件同时存在的闪烁情况。
<component :is="Component" />: 这里使用了Vue的动态组件<component>，通过:is属性绑定Component对象，实现根据不同的路由动态渲染不同的组件。v-slot传递过来的Component对象就是一个对应的Vue组件，:is属性会根据这个对象渲染相应的组件。

路由跳转

引用和注册

import { useRouter } from "vue-router"; // 路由
const router = useRouter(); //useRouter是一个函数，返回一个路由对象

定义跳转方法

const routerGo = (routeName: string, params: string) => {
  router.push({
    name: routeName,
    query: { id: params }
  });
};

获取参数

import { useRoute } from "vue-router";

const route = useRoute();
const id = route.query.id;

注意：使用query不需要在router.ts中注册路由时写参数，而使用params必须要注册