随着Vue版本的升级,Vue 2.x
项目和Vue 3.x
项目在使用vue-router上有些区别,本文就简单介绍下vue-router
在Vue3
中的配置和使用。
一、目录结构
1 |
|
二、版本依赖
vite
: ^2.0.0vue
: ^3.2.8vue-router
: ^4.0.1
三、配置路由
- 3-1.配置
src/router/index.js
路由文件
1 |
|
说明:
- 路由模式:
history
模式对应createWebHistory()
方法hash
模式对应createWebHashHistory()
方法
路由懒加载:在
vite+Vue3
项目中使用import()
会有报错,所以使用vue提供的一个方法defineAsyncComponent
,详见另一篇:vue3 + vite实现异步组件和路由懒加载3-2.在
src/main.js
入口文件中注册使用路由
1 |
|
- 3-3.在
src/App.vue
文件中使用<router-view/>
1 |
|
四、使用路由
- 4-1.在
Option API
中使用和Vue 2.x
中使用没有差别。如下:
1 |
|
- 4-2.在
Composition API
中不能再直接访问this.$router
或this.$route
,所以要使用useRouter
和useRoute
函数。
1 |
|
《Vue3学习与实战》系列
- Vue3学习与实战 · 组件通信
- Vue3学习与实战 · 全局挂载使用Axios
- Vue3学习与实战 · 配置使用vue-router路由(本文)
- Vue3学习与实战 · Vuex状态管理
- vue3 + vite实现异步组件和路由懒加载
- Vite+Vue3+Vant快速构建项目
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2021-11-26
最后更新: 2023-07-17
本文标题: Vue3学习与实战 · 配置使用vue-router路由
本文链接: https://www.tiven.cn/p/3747153d/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2021-11-26
最后更新: 2023-07-17
本文标题: Vue3学习与实战 · 配置使用vue-router路由
本文链接: https://www.tiven.cn/p/3747153d/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
赞赞赞
v1.4.16