Vue3的路由配置，零基础新手怎么从0搭出能用、好维护的架构？

最近身边很多刚学Vue3的朋友，写完组件就卡在路由上——要么页面切不动，要么懒加载报错，要么加了参数拿不到，更别说嵌套路由、路由守卫这些进阶功能怎么顺理成章塞进去，其实Vue3用的Vue Router4和旧版有本质区别，但核心逻辑没变，掌握几个关键节点就能快速上手，今天就用大家听得懂的话,一步步拆解这个问题。

先把最基础的“地基”打牢：环境准备和路由插件引入

搭任何项目的路由前，都得先确认项目状态——你是用Vite还是Vue CLI起的项目？这两种方式引入Vue Router4的步骤差不多,但细节有一点点不一样。

首先得安装依赖，别搞错版本号，Vue3必须配Vue Router4，别去下旧版的3.x，不然会报一堆看不懂的错，打开终端，cd到你的项目根目录，敲命令就行，要是项目里已经有package.json文件，记得看看有没有依赖冲突,比如是不是装了不兼容的其他路由库。

装完依赖之后，就要把路由“注册”到Vue实例里去，Vite和Vue CLI的入口文件不一样，Vite是main.js/main.ts，Vue CLI可能是main.js或者单独有个router/index.js再在main.js里引入，这里推荐不管用什么脚手架，都单独建个router文件夹放配置文件,以后维护起来太香了。

单独建文件夹的话，步骤就更清晰：先在src下面建个叫router的文件夹，里面放个index.js或者index.ts——用TypeScript的朋友记得装对应的类型声明包，不然写类型会飘红，然后在这个文件里，先从vue-router里引入两个核心东西：createRouter和createWebHistory（或者createWebHashHistory，新手可能暂时分不清这俩的区别，别着急，后面会讲），接着要定义路由规则数组，数组里每一个对象就是一条路由，至少要有path和component这两个属性——path是浏览器地址栏里显示的路径,component是路径对应的要显示的组件。

定义好规则数组之后，就要用createRouter创建路由实例了，这里要传一个配置对象，里面至少要有history和routes两个属性——routes就是刚才写的规则数组，history就是用刚才引入的createWebHistory或者Hash模式的方法生成的对象，新手如果还没准备服务器部署的话，先用Hash模式练手就行，因为Hash模式不需要服务器做额外配置，直接打开dist文件夹里的index.html就能用；但正式上线的话，还是推荐History模式，地址栏更干净,对SEO也更友好。

最后一步，就是在入口文件里引入刚才创建的路由实例，然后用app.use()把它注册到Vue应用上，这样整个项目就有路由功能了，对了，别忘了在App.vue里加一个<router-view />标签，这是路由组件的“容器”，所有路由跳转过来的组件都会显示在这个标签的位置；如果想做导航栏，就用<router-link />标签代替a标签，因为router-link是Vue Router内置的，会自动处理点击跳转，而且不会刷新页面,体验感更好。

新手最容易卡壳的三个点：嵌套路由、动态路由参数、路由懒加载

刚才的基础搭完，只能做最简单的单级跳转，比如从首页跳到关于页，但是实际开发中几乎都会用到嵌套路由，比如首页下面有推荐、热榜、关注三个子页面,这时候就得把刚才的单级规则改成嵌套的。

嵌套路由其实就是在父路由的规则对象里加一个children属性，children属性的值也是一个路由规则数组，写法和刚才的单级一样，但path要注意——如果子路由的path前面加了斜杠，那它就是绝对路径，浏览器地址栏里直接显示子路由的path；如果没加斜杠，就是相对路径，会自动拼接在父路由的path后面，举个例子，父路由的path是/home，子路由的path是hot，那相对路径的话完整地址就是/home/hot，要是子路由加了斜杠，直接是/hot，和父路由没关系了，对了，父路由的组件里也要加一个<router-view />标签，因为子组件要显示在父组件的这个容器里，别只在App.vue里加一个就不管了,不然嵌套路由的子组件根本出不来。

然后是动态路由参数，比如做一个用户详情页，总不能给每个用户都写一条路由吧？这时候就可以用动态参数，在path里用冒号加参数名的形式，user/:id，这里的id就是动态参数，不管浏览器地址栏里是/user/123还是/user/456，都会匹配到这条路由，然后显示对应的用户详情组件，那怎么拿到这个动态参数呢？有两种方法，一种是在组件里用useRoute()钩子，拿到route对象之后，访问route.params.id就行；另一种是在路由规则里加props属性，把参数当成props传给组件，这种方法更符合Vue的组件化思想，推荐用，props属性可以设为true，这样所有的动态参数都会自动当成props传给组件；也可以设为一个函数，返回一个对象，用来处理一些更复杂的参数,比如把params里的字符串id转成数字。

接下来是路由懒加载，这个功能对大项目太重要了——如果不做懒加载，打包的时候会把所有组件都打包到一个js文件里，文件会特别大，用户第一次打开网页的时候加载速度会很慢，甚至会白屏，懒加载的原理就是，当用户访问到某条路由的时候，再去加载对应的组件，而不是一开始就全加载完，Vue Router4里实现懒加载超级简单，只要把路由规则里的component属性改成一个箭头函数，然后在箭头函数里用import()动态导入组件就行，箭头函数会返回一个Promise对象，当Promise resolve的时候，组件就加载完成了，举个例子，之前直接写component: Home，现在改成component: () => import('../views/Home.vue')，就这么简单，对了，如果是用Vite的话，动态导入的路径一定要对，而且尽量不要用变量拼接路径，不然Vite可能无法正确识别,导致打包出错或者懒加载失效。

进阶但实用的功能：路由守卫、404页面、路由重定向

基础功能都会用了，接下来可以学几个进阶但几乎每个项目都会用到的功能，比如路由守卫——路由守卫就是在路由跳转的过程中，拦截一下，做一些判断或者操作，比如判断用户有没有登录，如果没登录就跳转到登录页；或者判断用户有没有权限访问某个页面,如果没权限就跳转到403页。

Vue Router4里的路由守卫有好几种，按作用范围分，有全局前置守卫、全局解析守卫、全局后置钩子、路由独享守卫、组件内守卫这几种，新手最常用的就是全局前置守卫，用来做登录验证和权限控制，全局前置守卫是用router.beforeEach()来注册的，这个方法接收一个回调函数，回调函数有三个参数：to、from、next，to是即将要进入的目标路由对象，from是当前导航正要离开的路由对象，next是一个函数，用来决定导航的下一步——如果直接调用next()，就继续执行导航；如果调用next(false)，就中断当前导航；如果调用next('/login')或者next({ path: '/login' })，就跳转到指定的路由，不过要注意，在Vue Router4里，next函数其实是可选的，你可以直接在回调函数里返回一个值来控制导航，比如返回true就继续，返回false就中断，返回一个路由对象就跳转，这种写法更简洁,推荐用TypeScript或者喜欢简洁代码的朋友试试。

然后是404页面，这个是必须的——如果用户访问了一个不存在的路径，总不能显示空白或者报错吧？404页面的配置也很简单，在路由规则数组的最后面加一条规则，path设为'/:pathMatch(.'，这里的正则表达式意思是匹配所有路径，然后component设为你写的404组件就行，注意一定要放在最后面，因为路由规则是按顺序匹配的，放在前面的话，所有的路径都会被匹配到这条404规则,其他规则就失效了。

路由重定向，比如你希望用户访问根路径'/'的时候，自动跳转到首页'/home'，这时候就可以用重定向，重定向的配置是在路由规则里加一个redirect属性，把component属性去掉，redirect属性的值可以是一个字符串路径，比如redirect: '/home'；也可以是一个路由对象，比如redirect: { path: '/home' }；还可以是一个函数，返回一个路径或者路由对象，用来处理更复杂的重定向逻辑,比如根据用户的登录状态跳转到不同的页面。

最后给新手的两个实用建议：路由配置的命名和模块化

刚才的所有功能都会用了，路由基本上就能搭得差不多了，但为了以后维护方便,还有两个小建议要给新手。

第一个是路由命名，就是在路由规则里加一个name属性，给每条路由起个名字，路由命名有什么用呢？用<router-link />跳转的时候，可以不用写path，直接写:to="{ name: 'Home' }"，这样就算以后改了path，也不用到处改跳转链接，只需要改路由规则里的path就行；用useRouter()钩子做编程式导航的时候，也可以用name跳转，同样的道理，方便维护；命名路由对动态参数和嵌套路由的支持也更好,比如跳转的时候传参数更方便。

第二个是路由配置的模块化，刚才我们说单独建一个router文件夹放index.js，但如果项目很大，有几十上百条路由规则的话，index.js会变得特别长，根本看不过来，这时候就可以把路由规则按模块拆分，比如把首页相关的路由放在home.js里，把用户相关的路由放在user.js里，把管理后台相关的路由放在admin.js里，然后在index.js里引入这些模块，合并到routes数组里就行，这样不仅index.js变得简洁，而且找某条路由规则的时候也更快,维护起来更方便。

Vue3的路由配置其实没有大家想象的那么难，只要把基础的“地基”打牢，然后一步步学进阶功能，再注意一下命名和模块化，就能搭出一个能用、好维护的路由架构了，如果在学习过程中遇到问题，可以多看看官方文档，官方文档写得很详细，而且有很多示例，几乎能解决新手遇到的所有问题，也可以多动手实践，多写几个小项目练手,熟能生巧嘛。