Vue3项目的路由配置

vue-router@4

1.安装vue3脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

你可以在命令提示符（cmd）中用这个命令来检查其版本是否正确：

vue --version

2.安装vue-router

npm install vue-router@4
# OR
yarn add vue-router@4

3.在src目录下创建pages文件用于保存路由组件，创建router文件夹用于保存配置路由的js文件：

4.配置路由（src/router/index.js） History和HashHistory区别

// createRouter用来创建路由对象, createWebHistory,createWebHashHistory用来指定路由模式
// 导入createRouter, createWebHistory或createWebHashHistory
import { createRouter, createWebHistory } from 'vue-router'

// 路由数组
const routes = [
    {
        path: '/home',
        component: ()=>import('../pages/Home')
    }
]

// 创建路由对象
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

5.在App.vue中配置路由出口

<template>
<router-view></router-view>
</template>

5.挂载路由

import { createApp } from 'vue'
import App from './App.vue'
// 导入router
import router from '@/router'

// 挂载路由
const app = createApp(App)
app.use(router)
app.mount('#app')