vue3的路由配置

1、安装路由

npm install vue-router

2、创建路由配置文件

新建 router目录，然后在 router目录下新建 index.js和 router.js文件

index.js 文件内容如下:

import {createRouter, createWebHistory} from 'vue-router'
import routes from './router'    //导入router目录下的router.js

const router = createRouter({
    history: createWebHistory(),     //路由模式
    routes
})

export default router      //导出

router.js 文件内容如下:

const route = [
    {
        name: 'Home',
        path: '/',
        component: () => import('../views/Home/Home.vue')
    },
    {
        name: 'About',
        path: '/about',
        component: () => import('../views/About/about.vue')
    }
];
export default route

3.在main中导入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

//注意use要在mount之前
createApp(App).use(router).mount('#app')

4.App.vue文件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>