Router安装以及导入
安装
本文适合Vue3的项目使用
- 安装vue-router4
npm install vue-router@4
- 在
src目录下创建router的文件夹，并新建一个index.js - 在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")},
]
- 以上我们只是创建了路由规则，接下来创建路由器
//创建路由器
const router = creatRouter({//使用传统模式，也可以使用Hash模式history:createWebHistory(),routes
})
- 导出路由器
export default router
- 在main.js中导入路由器
import router from './router'createApp(App).use(router).mount('#app')
- 在App.vue中添加
router-view的标签
<template><router-view/>
</template>