router-view的插槽 能够访问子组件中的数据，访问的数据就是Component和route
- Component: 要传递给<component> 的 VNodes 是 prop。
- route: 解析出的 [标准化路由地址]
//main.ts
<template>
<el-main>
<router-view v-slot="{ Component, route }">
<transition appear name="fade-transform" mode="out-in">
<keep-alive :include="keepAliveName">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</transition>
</router-view>
</el-main>
</template>
嵌套路由
动态添加路由
1.子路由的path带 '/ ' 则访问这个子路由时只需要访问子路由的path，系统会默认加载它所在的父组件。
如果前边没有 '/ ' 那么需要按照 /父路由/子路由的形式访问
//addRoute方法可以选择是否传入第一个参数，传入代表添加到该name路由的子路由中，不传入则表示添加到第一级路由中
// 给layout添加子路由
router.addRoute("layout", item as unknown as RouteRecordRaw);
//子路由中path带有/时，全路由为/service
item = {
path："/service", // /会被当作根路径
}
//子路由中路径不用写 / 时 , 全路由/layout/setting
item2 = {
path："setting",
}
route 和router的区别
- router 为VueRouter实例，想要导航到不同URL，则使用$router.push方法 ```
import {useRouter} from "vue-router"
const router = useRouter();
- route为当前router跳转对象里面可以获取name、path、query、params等
import {useRouter} from "vue-router"
const router = useRouter();
const route = router.currentRouter
