vue3项目怎么写路由 + 浅析vue-router4源码

在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的情况