vue-router学习8：RouterView插槽

RouterView用于渲染当前路由对应的组件，可以通过插槽（Slots）来提供更加灵活和强大的路由渲染能力。

RouterView 插槽概述

RouterView 提供了两个主要的插槽：

1. 默认插槽 (default slot)：用于渲染当前路由匹配到的组件。
2. 命名插槽 (named slots)：根据路由的 name 属性来渲染对应的组件。

安装并配置 

npm install vue-router

使用

<template>  
  <div id="app">  
    <header>  
      <!-- 导航栏或其他头部内容 -->  
    </header>  
  
    <main>  
      <!-- 默认插槽，用于渲染当前路由对应的组件 -->  
      <router-view></router-view>  
    </main>  
  
    <footer>  
      <!-- 页脚内容 -->  
    </footer>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { createRouter, createWebHistory } from 'vue-router';  
import Home from './views/Home.vue';  
import About from './views/About.vue';  
  
// 定义路由  
const routes = [  
  { path: '/', component: Home, name: 'Home' },  
  { path: '/about', component: About, name: 'About' },  
];  
  
// 创建路由实例  
const router = createRouter({  
  history: createWebHistory(),  
  routes,  
});  
  
// 提供路由实例给组件  
defineExpose({ router });  
</script>

在这个例子中，RouterView 被放置在 <main> 标签内，用于渲染当前路由对应的组件。header 和 footer 分别代表应用的头部和页脚内容，它们不随路由改变而改变。

如果你想要根据路由的 name 来渲染不同的内容，你可以使用命名插槽。例如，假设你有一个侧边栏，它根据路由的不同显示不同的内容：

<template>  
  <div id="app">  
    <header>  
      <!-- 导航栏或其他头部内容 -->  
    </header>  
  
    <aside>  
      <!-- 命名插槽，用于根据路由的 name 渲染不同内容 -->  
      <router-view name="aside"></router-view>  
    </aside>  
  
    <main>  
      <!-- 默认插槽，用于渲染当前路由对应的组件 -->  
      <router-view></router-view>  
    </main>  
  
    <footer>  
      <!-- 页脚内容 -->  
    </footer>  
  </div>  
</template>

然后，在你的路由配置中，你可以这样使用命名视图：

// ...之前的代码...  
  
const routes = [  
  {  
    path: '/',  
    components: {  
      default: Home,  
      aside: AsideHome, // 假设 AsideHome 是侧边栏的 Home 组件  
    },  
    name: 'Home',  
  },  
  {  
    path: '/about',  
    components: {  
      default: About,  
      aside: AsideAbout, // 假设 AsideAbout 是侧边栏的 About 组件  
    },  
    name: 'About',  
  },  
];  
  
// ...之后的代码...

在这个配置中，components 属性是一个对象，它的键是插槽的名字，值是对应的组件。这样，当路由变化时，RouterView 会根据路由配置中定义的组件来渲染对应的插槽内容。 

注意，命名视图和插槽的使用需要你在路由配置中明确地指定每个插槽应该渲染哪个组件。这样，Vue Router 才能正确地渲染出你期望的布局和组件结构。