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