Vue-Router 第七节：命名视图

大多数情况，我们需要在一个组件里，展示多个路由视图，而不是嵌套显示。命名视图可以让我们实现一个组件中具有多个路由渲染出口，这对很多布局很有用，例如一般系统的首页（侧导航、主内容）。

目前我们router-view 没有设置名字，那么默认为default。下面来实操下：

// router/index.ts 页面
import About from '@/views/about/index.vue'
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [   
// router/index.ts  
    {
        path: '/',
        components: {                                      // 注意：component 改为 components
            default: import("@/views/home/index.vue"),    //  默认路由
            one: import("@/views/user/userOne.vue"),     //  命名One
            two: import("@/views/user/userTwo.vue")     //  命名TWO
        }
    }
    ]
const router = createRouter({
    // 路由的模式：  vue2:
    // vue2 mode  history | vue3  createWebHistory
    // vue2 mode  hash    | vue3  createWebHashHistory
    // vue2 mode  abstact | vue3  createMemoryHistory   
    history: createWebHistory(),
    routes
})
​
// 导出
export default router

// App.vue
 <template>
      <div>
        <router-view />
        <router-view name='one' />
        <router-view name='two' />
      </div>
    </template>

打开页面：