安装

本文适合Vue3的项目使用

1. 安装vue-router4

npm install vue-router@4

2. 在src目录下创建router的文件夹，并新建一个index.js
3. 在index.js中导入vue-router，并定义其实例

import { createRouter, createWebHistory } from 'vue-router'//在其中定义路由
const routes = [//每个路由都是一个对象{path: "/",component: () -> import("../views/index.vue")},{path: "/content",component: () -> import("../views/content.vue")},
]

4. 以上我们只是创建了路由规则，接下来创建路由器

//创建路由器
const router = creatRouter({//使用传统模式，也可以使用Hash模式history:createWebHistory(),routes
})

5. 导出路由器

export default router

6. 在main.js中导入路由器

import router from './router'createApp(App).use(router).mount('#app')

7. 在App.vue中添加router-view的标签

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