vue3项目中引入vue-router路由

1. 安装vue-router

npm install vue-router@4

2. 在src目录下新建router文件夹及index.ts文件

3. index.ts文件中声明路由文件

// 1. 引入路由对象

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('@/views/Index.vue') // 懒加载方式
    }
]

// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
    history: createWebHistory(),
    routes
})

// 4. 导出路由实例
export default router

4. 再main.ts文件中引入路由文件并挂载

import { createApp } from 'vue'
// 初始化css
import 'normalize.css'
import App from './App.vue'
// 引入路由实例
import router from './router'


// 创建并挂载根实例
const app = createApp(App)

app.use(router)
app.mount('#app')