vue3_element_demo1/src/router/index.js

// 引入必要的router组件
import {createRouter, createWebHistory} from 'vue-router'
// 引入视图

const Home = ()=>import('../views/HomeView.vue')
const About = () => import('../views/AboutView.vue')
const Header1 = () => import('../components/Header1.vue')
const Header2 = () => import('../components/Header2.vue')


// 创建路由，如果同一个路由中包含多个组件，则将component改名为components（加s），已对像的形式加添加多个组件，对象中的key是对象的名称， 可以在视图中使用此名称指定组件
const routes = [
    {
        path: '/',
        name: 'home',
        components: {
            header: Header1,
            default: Home,
        }
    },
    {
        path: '/about',
        name: 'about',
        components: {
            header: Header2,
            default: About,
        }
    },
]

// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
const router = createRouter({
    history: createWebHistory(),
    routes
})

// 导出路由
export default router