router-view的name属性 ＜router-view name=“path“＞＜/router-view＞

多个router-view的问题

一个页面可以配置多个router-view，加上name属性使之区分，在路由配置中需要将component变为components，代码如下

//vue2
import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
 
  const routes = [
  {
    path: '/',
    name: 'Home',
    components: {
      default: () => import('../views/Home.vue'),
      compA: () => import('../components/ComponentOne.vue'),
      compB: () => import('../components/ComponentTwo.vue')
    }
  },
  {
    path: '/about',
    name: 'About',
    components: {
      A: () => import('../components/ComponentThree.vue'),
      B: () => import('../components/ComponentTwo.vue')
    }
  }
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 

//vue3
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

const router = createRouter({
    routes: [
        {
    path: '/',
    name: 'Home',
    components: {
      default: () => import('../views/Home.vue'),
      compA: () => import('../components/ComponentOne.vue'),
      compB: () => import('../components/ComponentTwo.vue')
    }
  },
  {
    path: '/about',
    name: 'About',
    components: {
     A: () => import('../components/ComponentThree.vue'),
     B: () => import('../components/ComponentTwo.vue')
    }
  }
    ],
     //history:createWebHistory("/xxx地址")  // 注意base只有在history模式下才有校
    // history:createWebHashHistory() // 定义hash模式路由
       history:createWebHistory() // 定义history模式路由

})
export default router

在页面中使用

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
    <router-view name="A"></router-view>
    <router-view name="B"></router-view>
  </div>
</template>