Router安装以及导入

安装

本文适合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>