在SPA项目里,路由router基本是前端侧处理的,那么vue3项目中一般会怎么去写router呢,本文就来讲讲vue-router4的一些常用写法,以及和Composition API的结合使用,同时简单讲讲实现原理,让你轻松理解前端router的原理。
基础配置
安装命令
入口引入
第一步是在main.ts的入口文件里引入router的插件
这里讲解下history这个配置
createWebHashHistory:指的是用hash模式路由,比如/#/order/detail这种带#的path
其他配置还有:
createWebHistory:基于html5原生的history API实现路由
createMemoryHistory:基于内存信息来隐式管理路由,适用于SSR场景
除了上面main.ts入口的配置,还需要在你的App.vue入口组件里使用<router-view>,这样路由匹配的视图就会加载在这个组件下面。
路由配置
入口配置完了,接下来就是各个分路由怎么配置
上面的代码就是之前提到的router文件,path是页面的路径,compnent对应视图组件
一般来说还会存在动态params的情况
这里的id其实就是一个动态参数,/order/123或/order/80EA都能匹配上

本文介绍了Vue3项目中如何配置和使用路由,包括基础配置、路由守卫、Composition API下的useRoute和useRouter,以及route-view组件的工作原理。通过实例展示了动态参数、路由守卫维护登录态、以及如何利用Composition API与vue-router4结合使用。最后,文章还简要提及了vue-router的核心组件route-view的实现原理。
最低0.47元/天 解锁文章
1万+

被折叠的 条评论
为什么被折叠?



