关于vueRouter@3的路由命令视图

vueRouter @4 中使用的命令视图

命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口， 命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default。

组件

<template>
  <router-link to="/">首页</router-link>//
  <router-link to="/login">登录</router-link>//
  <router-link to="/like">like</router-link>

  //  当切换到对应路由下时， 检查对应路由注册下有无 name的a或者b， 有则展示
  <router-view></router-view>
  <router-view name="a"></router-view>
  <router-view name="b"></router-view>
</template>

路由

const stateRouterLists: Array<RouteRecordRaw> = [{
    path: '/',
    name: 'index',
    components: {
        default: () => import('@/views/home/index.vue'),
        a: () => import('@/views/a/index.vue'),
        b: () => import('@/views/b/index.vue')
    }
}, {
    path: '/like/',
    name: 'like',
    component: () => import('@/views/like/index.vue')
}, {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue')
}, {
    path: '/error',
    name: '404',
    component: () => import('@/views/login/index.vue')
}]

切换到home时可以展示两个路由组件的内容