从路由嵌套聊起说说前后台同构的项目该怎么落地。最近在带一个前端小组做管理后台的改造好几个同学都在问同一件事为什么我们写路由的时候非要把一堆页面分成“前台”和“后台”两拨来组织明明都是路由配置直接铺平了写不是更省事吗说实话这种困惑很典型。路由嵌套和前后台搭建看起来是两个独立的技术点但它们在真实项目里是强绑定的——后台管理的经典布局侧边栏顶部栏内容区就是靠嵌套路由撑起来的而前后台的分层又决定了路由表的组织方式。这篇文章我就把这块掰开揉碎了讲清楚。这个Day10的主题本质上是在解决一件事当你的项目既有用户访问的前台页面又有管理员操作的后台页面时怎么用一套代码、一套路由体系把这两种不同的界面结构治理得清清楚楚。适合正在学前端框架的人也适合刚接手后台管理项目、对路由组织还比较模糊的同学参考。我会以Vue Router为例来写核心实现同时也给你对比React Router的写法因为这两个框架的嵌套思路是一致的只是API略有差异。1. 从单层路由到嵌套路由为什么要做前后台分层很多初学者最开始写路由是这样的一个路由对应一个页面组件配一个路径完事。这是单层路由对demo来说没问题可一旦进入真实项目尤其是带后台管理的系统单层路由立刻会暴露两个问题。第一个问题是布局重复。假设你的后台有10个页面每个页面顶部都要有一个相同的侧边栏如果你用单层路由那就只能在10个页面组件里分别引入这个侧边栏组件改一次样式要动10个文件。第二个问题是语义不清。前台的路由比如/home、/product和后台的路由比如/admin/dashboard、/admin/user混杂在一张平铺的路由表里项目大了以后根本分不清哪条路径挂在哪个布局下面权限控制也难做。嵌套路由就是用来解决这两个问题的。它的核心思想是让路由表呈现父子层级父路由负责渲染公共布局子路由负责渲染具体页面内容。这样侧边栏、顶部栏这些公共部分只需要写在父布局组件里一次子页面通过一个叫RouterViewVue里或者OutletReact里的插槽位置自动镶进去。1.1 后台管理系统的经典布局与路由痛点后台管理系统长什么样你打开任何一个管理后台几乎都能看到三块区域左侧菜单栏、顶部操作栏、中间内容区。这个结构的本质是菜单栏和顶部栏是“恒定不变”的部分内容区是“随路由切换”的部分。这种布局天然适合嵌套路由来承接。我们可以在路由表里这样设计父路由/admin对应布局组件AdminLayout这个组件内部写死侧边栏和顶部栏中间放一个内容出口。子路由/admin/dashboard、/admin/user/list、/admin/setting分别对应不同的功能页面它们都渲染在父布局的内容出口里。这样一来切子路由时侧边栏和顶部栏不会重新渲染只有内容区刷新。这个好处不只是省事对性能也有帮助——公共部分不用每次都重新挂载组件的局部状态也不会丢失。如果你没有用嵌套路由而是强行在页面组件里复制布局代码那每切一次路由整个布局都要重新渲染一遍。后台页面上往往有菜单展开收起的状态、标签页的记录这些状态全都会被重置。所以嵌套路由不只是代码组织的优化它直接关系到后台系统的使用体验。1.2 嵌套路由到底解决了什么问题我习惯把嵌套路由理解成“房子的骨架和房间”。父路由是房子的框架它把承重墙布局砌好了子路由是各个房间装修页面内容各有不同但都跑不出这个框架的边界。这个比喻对应到代码里就非常直观了路径的层级映射到组件的层级看到 URL 就知道页面结构。/admin/user/detail/123一眼就能看出这是后台、用户模块、详情页、ID是123。公共逻辑上提。侧边栏菜单的高亮状态、用户头像、退出登录按钮这些逻辑只需要在父布局里写一次子页面天然共享。路由守卫可以做分层控制。你可以在父路由上拦一轮登录校验在子路由上再做一轮权限校验互不干扰。这个结构一旦建立起来前后台的搭建就有章法了。前台路由可以独立成一个分支后台路由挂在另一个父路由下两者不打架也不需要在同一个路由层级里做各种奇怪的判断。2. 路由嵌套的实现细节以Vue Router为例光说概念没有用直接看代码。以下是我在一个模拟项目中使用过的路由实现方式这个项目是某公司的商家管理后台既有对外展示的首页、活动页也有对内的登录后台、商品管理、订单管理很典型的“前后台合并”场景。2.1 路由表设计与目录结构项目里我的做法是先按模块建目录一个业务模块一个目录里面放置页面组件和子路由配置。这样做的好处是模块边界清晰后期拆包或者交给不同的人维护都很顺手。src/ ├── layouts/ │ ├── FrontLayout.vue # 前台公共布局顶部导航底部 │ └── AdminLayout.vue # 后台公共布局侧边栏顶部栏内容区 ├── router/ │ └── index.js # 路由入口组装上面的模块路由 ├── views/ │ ├── front/ │ │ ├── home/ │ │ ├── activity/ │ │ └── about/ │ └── admin/ │ ├── dashboard/ │ ├── product/ │ ├── order/ │ └── user/目录结构和路由结构一一对应。views/front下的组件都由FrontLayout包裹views/admin下的组件都由AdminLayout包裹。这样任何人接手项目打开目录扫一眼就能明白路由的大致形态。路由表的组装则使用模块化的方式。比如后台商品模块的路由配置单独放在views/admin/product/router.js里再在router/index.js中集中注册。这样做的好处是当你以后做权限控制或按需加载时可以直接拿到模块级的路由配置不需要从全局路由表里做复杂的过滤。2.2 核心代码讲解children与RouterView在 Vue Router 4 里嵌套路由靠的是children字段和RouterView组件的配合。先看父路由// router/index.js import { createRouter, createWebHistory } from vue-router const router createRouter({ history: createWebHistory(), routes: [ { path: /, component: () import(/layouts/FrontLayout.vue), children: [ { path: , name: Home, component: () import(/views/front/home/index.vue) }, { path: activity, name: Activity, component: () import(/views/front/activity/index.vue) } ] }, { path: /admin, component: () import(/layouts/AdminLayout.vue), redirect: /admin/dashboard, children: [ { path: dashboard, name: AdminDashboard, component: () import(/views/admin/dashboard/index.vue) }, { path: product, name: AdminProduct, component: () import(/views/admin/product/index.vue) }, { path: order, name: AdminOrder, component: () import(/views/admin/order/index.vue) } ] } ] }) export default router这里有几个细节我需要强调第一子路由的path不要写成以斜杠开头的绝对路径。比如子路由product写成product即可它会被自动拼接成/admin/product。如果你写成/product它就会变成根路径下的/product完全脱离父路由的管辖布局也就没有意义了。这是新手最容易翻车的地方。第二父路由可以设置redirect。访问/admin时用户还没指定具体页面我们直接重定向到仪表盘。这个做法不仅省事还避免了内容区空白的尴尬。第三组件加载尽量用() import()懒加载。后台管理的子路由对应的页面通常靠后才会被访问没必要打进首屏的包。配合Webpack或Vite的代码分割每个子路由会独立成一个chunk。父布局组件内部只需要一个RouterView出口侧边栏和顶部栏直接在模板里写死!-- layouts/AdminLayout.vue -- template div classadmin-layout aside classadmin-sidebar !-- 菜单区域 -- router-link to/admin/dashboard仪表盘/router-link router-link to/admin/product商品管理/router-link router-link to/admin/order订单管理/router-link /aside div classadmin-main header classadmin-header !-- 顶栏区域面包屑、用户信息等 -- /header main classadmin-content router-view / /main /div /div /template当你访问/admin/product时AdminLayout先被渲染出来接着RouterView根据当前路径的子路由记录把Product组件渲染进main区域里。切到/admin/order时AdminLayout不会重新创建只有RouterView内部的内容被替换。2.3 React Router里的嵌套写法对比不少同学用的是React思路完全一致只是API不同。React Router 6 用Outlet组件代替了RouterView的位置。// 父路由配置 const router createBrowserRouter([ { path: /admin, element: AdminLayout /, children: [ { path: dashboard, element: Dashboard / }, { path: product, element: Product / } ] } ]) // AdminLayout组件内部 function AdminLayout() { return ( div classNameadmin-layout Sidebar / div classNameadmin-main Header / Outlet / /div /div ) }思路基本一致父布局组件内部留着Outlet等子路由来填。React Router的element写法组件和路由的对应关系也扫一眼就懂。骨架搭好之后无论你后续用的是Vue、React还是其他框架理解这个嵌套思想才是最重要的。3. 项目前后台搭建的完整流程前面说的是路由嵌套的基础用法这一节我直接讲一个完整的前后台搭建流程。从一个空项目开始到跑起来一个带前后台分层的应用总共四步。3.1 目录拆分前台与后台分离前后台分离的第一件事不是写路由而是把目录结构先立起来。我的习惯是页面组件按“前台”“后台”分为两级目录公共布局单拎出来放layouts目录。src/ ├── api/ # 接口请求模块 │ ├── front.js # 前台接口 │ └── admin.js # 后台接口 ├── assets/ # 公共资源 ├── components/ # 公共组件 │ ├── common/ # 通用业务组件前后台共用 │ ├── front/ # 仅前台使用的组件 │ └── admin/ # 仅后台使用的组件 ├── layouts/ # 布局组件 ├── router/ # 路由配置 ├── store/ # 状态管理 ├── styles/ # 全局样式 └── views/ ├── front/ # 前台页面 └── admin/ # 后台页面这个拆分方式有一个额外的加成构建时可以做环境区分。比如在这个模拟项目中前台和后台打包成两个子应用部署或者在同一个应用里用不同的路由前缀做隔离。目录先分好了切换成本就会很低。3.2 后台布局与登录态控制的联动后台管理系统还有个绕不开的需求登录校验。没有登录的人不能访问后台页面一旦登录过期就要跳回登录页。这个逻辑如果不加约束你可能会在每个页面组件里复制粘贴一段“判断是否登录”的代码。更好的做法是利用路由守卫在顶层统一拦截。router.beforeEach((to, from, next) { const isLoggedIn localStorage.getItem(token) if (to.path.startsWith(/admin) !isLoggedIn) { next(/login) return } next() })注意这里只是最简单的示例。真实项目里登录状态通常存在store里并且需要异步获取用户信息。遇到这种情况我会在守卫里加上异步等待的逻辑router.beforeEach(async (to, from, next) { const userStore useUserStore() if (!userStore.hasFetched) { try { await userStore.fetchUserInfo() } catch (e) { next(/login) return } } next() })把“获取用户信息”和“校验登录状态”放到同一轮异步流程里避免页面组件自己各查各的。登录之后还需要让前台和后台共用同一个登录态。这里我推荐在用户登录成功后跳转时带上一个redirect参数等登录完直接返回原页。实现方式不复杂核心是登录页读取路由的query// 登录成功后的跳转逻辑 const redirectPath route.query.redirect || /admin/dashboard router.push(redirectPath)3.3 动态路由与权限控制的进阶做法前后台搭好之后权限控制自然会被提上日程。后台管理里常见的权限模型有两种角色权限和接口权限。前端导航菜单的渲染通常依赖角色权限。这一步就用到动态路由了。做法是不在路由表里写死所有后台子路由而是登录后根据用户的角色把有权限的路由动态添加进路由实例。// 根据角色过滤路由配置 const adminRoutes [ { path: dashboard, component: Dashboard }, { path: product, component: Product }, { path: user, component: User } ] function filterRoutesByRole(allRoutes, role) { if (role super_admin) return allRoutes return allRoutes.filter(route route.meta?.roles?.includes(role)) } // 登录后动态添加 const allowedRoutes filterRoutesByRole(adminRoutes, user.role) allowedRoutes.forEach(route { router.addRoute(AdminParentName, route) })这里有两个关键点要留意。第一动态添加路由时要指定父路由的名字否则新路由会被加在根级别布局又会失效。第二动态路由对刷新页面不友好因为刷新后store会重置动态路由需要重新走一遍登录校验和路由添加流程。所以动态路由方案必然伴随着全局守卫里的异步初始化这个前面已经说过了。如果你的项目只是中小型后台我更推荐用相对简单的静态路由菜单过滤方案。即路由表里所有页面都配好但菜单是根据用户角色动态渲染的。用户没有权限的菜单不展示路由记录虽然存在但配合路由守卫做第二层拦截不让越权访问。这样实现起来简单也够用。4. 常见问题与排查技巧实录写到这里把我在实际项目里遇到的、以及带新人时发现的高频问题汇总了一下。这一节的每个问题我都亲手踩过坑按排查顺序给你一个可执行的思路。4.1 嵌套路由页面不渲染的常见原因症状访问/admin/product地址栏路径正确但是内容区一片空白甚至整个页面白屏。排查优先级如下第一看你是否在父布局里写了RouterView。如果父布局组件里只有侧边栏和顶栏没有RouterView那子路由根本没有内容出口自然会渲染成空白。这听起来像是低级错误但特别容易发生在刚开始写嵌套路由的人身上——因为有时代码是照抄的漏掉了最关键的出口组件。第二看子路由的path是否以斜杠开头。以斜杠结尾的路径是绝对路径会脱离父路由前缀。比如你把product写成了/product这个路由就变成了根路径下的路由父布局完全不会参与渲染页面大概率只显示一个白窗或空壳。第三看父路由的component是否正确加载。如果父组件用懒加载且路径写错子路由跟着全部白屏。排查方式就是打开浏览器控制台看Network面板里有没有对应的JS文件报404。第四确认子路由的名称name是唯一的。Vue Router会警告重复的name而且在路由跳转时容易出现跳错组件的诡异问题。出现这种问题先全局搜一遍name字段改掉重复的再说。4.2 404页面在嵌套路由下失效的处理后台管理系统一般都有个自定义404页面要么是“页面不存在”要么是“无权限”。但嵌套路由下404的配置有讲究。如果你把404配置在根路由层级{ path: /:pathMatch(.*)*, component: NotFound }那么它只会匹配根路径下的非法路径。如果你的后台子路由里出现了拼写错误比如访问/admin/produc而非/admin/product200和404的匹配规则会让它先尝试匹配子路由匹配失败后再向上冒泡。这个时候如果根路由没有兜底页面就会空白。我在项目中习惯给每个嵌套层级都加一个兜底子路由保证任何非法子路径都能有响应{ path: /admin, component: AdminLayout, children: [ // 其他业务路由 { path: :pathMatch(.*)*, component: AdminNotFound } ] }这样访问/admin/produc时它会先匹配当前层级的兜底路由渲染一个友好的404提示。对于前台部分同样在根层级加一个通配的404。两层兜底互不干扰。4.3 keep-alive与组件缓存的坑管理后台还有一个常见的体验需求列表页滚动到一半切到详情页再切回来时希望保留列表的状态。这个用keep-alive实现但它和嵌套路由配合时有个容易踩的坑。在Vue 3里keep-alive依赖组件的name字段来匹配缓存。如果你用了Script setup语法组件默认没有name那就无法被缓存。我的做法是在defineOptions里显式声明namescript setup defineOptions({ name: ProductList }) /script template !-- 列表内容 -- /template然后在RouterView外层包裹keep-alive并用:include指定需要缓存的组件名单router-view v-slot{ Component } keep-alive :include[ProductList, OrderList] component :isComponent / /keep-alive /router-view这里要注意用:include数组指定缓存名单比无脑缓存所有页面要好得多。因为后台管理系统的列表页可能有很多状态缓存也意味着内存占用会一直堆着不用的页面及时释放才是健康的。另一个坑是商品列表页里可能有子路由或tab切换比如商品列表和商品详情共用同一个父组件。此时如果include配置不当切回列表时会把详情页的滚动位置也缓存下来体验很割裂。解决办法是拆开成不同页面组件或者在组件内部用onActivated和onDeactivated钩子做状态还原逻辑而不是依赖缓存机制本身去兜底。4.4 权限控制与动态路由的刷新丢失问题前面提到了动态路由刷新页面后会丢失。这个问题如果你遇到排查方向有两个。第一个方向是看全局守卫是否保证了登录用户信息先于路由跳转加载完成。如果用户信息还没拉取路由就已经开始解析那么没有任何一个子路由会被动态添加页面能显示才怪。第二个方向是看动态添加路由的时机。router.addRoute()要在路由跳转发生之前执行。如果你需要在登录页跳转到后台那么动态路由的添加必须在router.push(/admin/dashboard)调用之前同步完成。异步添加会导致第一次跳转找不到路由从而落到404兜底里。我建议的做法是把动态路由的添加过程封装成一个函数放到全局守卫里let addedRoutes null router.beforeEach(async (to, from, next) { const userStore useUserStore() if (!userStore.hasInit) { await userStore.fetchUserInfo() if (userStore.role super_admin) { addedRoutes registerAdminRoutes(router) } } next() })addedRoutes变量用来标记路由是否已经添加过避免每次跳转都重复添加导致路由膨胀。这是一个容易忽略的性能点不加保护的话每跳转一次就重复注册一遍同名的动态路由控制台里会有路由重复的警告严重时还会导致路径匹配异常。最后再奉送一个小技巧如果你愿意在项目里多用一层脑我建议在路由配置里统一维护一个meta字段把面包屑、菜单标题、页面标题、是否需要缓存全都丢进去。这看起来只是一个约定但等后台页面多了以后你会发现菜单渲染、面包屑自动生成、标题动态修改全部可以基于这同一个字段派生出来。路由嵌套的骨架搭好了这些基于路由元信息的统一处理会让项目的整洁度再上一个台阶。我在实际带这个项目时最初只是想着怎么让路由看起来分层合理结果做着做着发现前后台搭建的价值远远不止“布局复用”这么简单。它把登录态控制、权限过滤、页面缓存、菜单渲染这些原本散落在各个页面里的逻辑全部收编到了路由这一层统一治理。项目的前期多花半天设计路由结构后期维护省下来的时间只会更多。如果你也在搭自己的管理后台这个设计思路可以直接照搬遇到问题多翻翻路由表通常答案都在里面。
从路由嵌套聊起说说前后台同构的项目该怎么落地。最近在带一个前端小组做管理后台的改造好几个同学都在问同一件事为什么我们写路由的时候非要把一堆页面分成“前台”和“后台”两拨来组织明明都是路由配置直接铺平了写不是更省事吗说实话这种困惑很典型。路由嵌套和前后台搭建看起来是两个独立的技术点但它们在真实项目里是强绑定的——后台管理的经典布局侧边栏顶部栏内容区就是靠嵌套路由撑起来的而前后台的分层又决定了路由表的组织方式。这篇文章我就把这块掰开揉碎了讲清楚。这个Day10的主题本质上是在解决一件事当你的项目既有用户访问的前台页面又有管理员操作的后台页面时怎么用一套代码、一套路由体系把这两种不同的界面结构治理得清清楚楚。适合正在学前端框架的人也适合刚接手后台管理项目、对路由组织还比较模糊的同学参考。我会以Vue Router为例来写核心实现同时也给你对比React Router的写法因为这两个框架的嵌套思路是一致的只是API略有差异。1. 从单层路由到嵌套路由为什么要做前后台分层很多初学者最开始写路由是这样的一个路由对应一个页面组件配一个路径完事。这是单层路由对demo来说没问题可一旦进入真实项目尤其是带后台管理的系统单层路由立刻会暴露两个问题。第一个问题是布局重复。假设你的后台有10个页面每个页面顶部都要有一个相同的侧边栏如果你用单层路由那就只能在10个页面组件里分别引入这个侧边栏组件改一次样式要动10个文件。第二个问题是语义不清。前台的路由比如/home、/product和后台的路由比如/admin/dashboard、/admin/user混杂在一张平铺的路由表里项目大了以后根本分不清哪条路径挂在哪个布局下面权限控制也难做。嵌套路由就是用来解决这两个问题的。它的核心思想是让路由表呈现父子层级父路由负责渲染公共布局子路由负责渲染具体页面内容。这样侧边栏、顶部栏这些公共部分只需要写在父布局组件里一次子页面通过一个叫RouterViewVue里或者OutletReact里的插槽位置自动镶进去。1.1 后台管理系统的经典布局与路由痛点后台管理系统长什么样你打开任何一个管理后台几乎都能看到三块区域左侧菜单栏、顶部操作栏、中间内容区。这个结构的本质是菜单栏和顶部栏是“恒定不变”的部分内容区是“随路由切换”的部分。这种布局天然适合嵌套路由来承接。我们可以在路由表里这样设计父路由/admin对应布局组件AdminLayout这个组件内部写死侧边栏和顶部栏中间放一个内容出口。子路由/admin/dashboard、/admin/user/list、/admin/setting分别对应不同的功能页面它们都渲染在父布局的内容出口里。这样一来切子路由时侧边栏和顶部栏不会重新渲染只有内容区刷新。这个好处不只是省事对性能也有帮助——公共部分不用每次都重新挂载组件的局部状态也不会丢失。如果你没有用嵌套路由而是强行在页面组件里复制布局代码那每切一次路由整个布局都要重新渲染一遍。后台页面上往往有菜单展开收起的状态、标签页的记录这些状态全都会被重置。所以嵌套路由不只是代码组织的优化它直接关系到后台系统的使用体验。1.2 嵌套路由到底解决了什么问题我习惯把嵌套路由理解成“房子的骨架和房间”。父路由是房子的框架它把承重墙布局砌好了子路由是各个房间装修页面内容各有不同但都跑不出这个框架的边界。这个比喻对应到代码里就非常直观了路径的层级映射到组件的层级看到 URL 就知道页面结构。/admin/user/detail/123一眼就能看出这是后台、用户模块、详情页、ID是123。公共逻辑上提。侧边栏菜单的高亮状态、用户头像、退出登录按钮这些逻辑只需要在父布局里写一次子页面天然共享。路由守卫可以做分层控制。你可以在父路由上拦一轮登录校验在子路由上再做一轮权限校验互不干扰。这个结构一旦建立起来前后台的搭建就有章法了。前台路由可以独立成一个分支后台路由挂在另一个父路由下两者不打架也不需要在同一个路由层级里做各种奇怪的判断。2. 路由嵌套的实现细节以Vue Router为例光说概念没有用直接看代码。以下是我在一个模拟项目中使用过的路由实现方式这个项目是某公司的商家管理后台既有对外展示的首页、活动页也有对内的登录后台、商品管理、订单管理很典型的“前后台合并”场景。2.1 路由表设计与目录结构项目里我的做法是先按模块建目录一个业务模块一个目录里面放置页面组件和子路由配置。这样做的好处是模块边界清晰后期拆包或者交给不同的人维护都很顺手。src/ ├── layouts/ │ ├── FrontLayout.vue # 前台公共布局顶部导航底部 │ └── AdminLayout.vue # 后台公共布局侧边栏顶部栏内容区 ├── router/ │ └── index.js # 路由入口组装上面的模块路由 ├── views/ │ ├── front/ │ │ ├── home/ │ │ ├── activity/ │ │ └── about/ │ └── admin/ │ ├── dashboard/ │ ├── product/ │ ├── order/ │ └── user/目录结构和路由结构一一对应。views/front下的组件都由FrontLayout包裹views/admin下的组件都由AdminLayout包裹。这样任何人接手项目打开目录扫一眼就能明白路由的大致形态。路由表的组装则使用模块化的方式。比如后台商品模块的路由配置单独放在views/admin/product/router.js里再在router/index.js中集中注册。这样做的好处是当你以后做权限控制或按需加载时可以直接拿到模块级的路由配置不需要从全局路由表里做复杂的过滤。2.2 核心代码讲解children与RouterView在 Vue Router 4 里嵌套路由靠的是children字段和RouterView组件的配合。先看父路由// router/index.js import { createRouter, createWebHistory } from vue-router const router createRouter({ history: createWebHistory(), routes: [ { path: /, component: () import(/layouts/FrontLayout.vue), children: [ { path: , name: Home, component: () import(/views/front/home/index.vue) }, { path: activity, name: Activity, component: () import(/views/front/activity/index.vue) } ] }, { path: /admin, component: () import(/layouts/AdminLayout.vue), redirect: /admin/dashboard, children: [ { path: dashboard, name: AdminDashboard, component: () import(/views/admin/dashboard/index.vue) }, { path: product, name: AdminProduct, component: () import(/views/admin/product/index.vue) }, { path: order, name: AdminOrder, component: () import(/views/admin/order/index.vue) } ] } ] }) export default router这里有几个细节我需要强调第一子路由的path不要写成以斜杠开头的绝对路径。比如子路由product写成product即可它会被自动拼接成/admin/product。如果你写成/product它就会变成根路径下的/product完全脱离父路由的管辖布局也就没有意义了。这是新手最容易翻车的地方。第二父路由可以设置redirect。访问/admin时用户还没指定具体页面我们直接重定向到仪表盘。这个做法不仅省事还避免了内容区空白的尴尬。第三组件加载尽量用() import()懒加载。后台管理的子路由对应的页面通常靠后才会被访问没必要打进首屏的包。配合Webpack或Vite的代码分割每个子路由会独立成一个chunk。父布局组件内部只需要一个RouterView出口侧边栏和顶部栏直接在模板里写死!-- layouts/AdminLayout.vue -- template div classadmin-layout aside classadmin-sidebar !-- 菜单区域 -- router-link to/admin/dashboard仪表盘/router-link router-link to/admin/product商品管理/router-link router-link to/admin/order订单管理/router-link /aside div classadmin-main header classadmin-header !-- 顶栏区域面包屑、用户信息等 -- /header main classadmin-content router-view / /main /div /div /template当你访问/admin/product时AdminLayout先被渲染出来接着RouterView根据当前路径的子路由记录把Product组件渲染进main区域里。切到/admin/order时AdminLayout不会重新创建只有RouterView内部的内容被替换。2.3 React Router里的嵌套写法对比不少同学用的是React思路完全一致只是API不同。React Router 6 用Outlet组件代替了RouterView的位置。// 父路由配置 const router createBrowserRouter([ { path: /admin, element: AdminLayout /, children: [ { path: dashboard, element: Dashboard / }, { path: product, element: Product / } ] } ]) // AdminLayout组件内部 function AdminLayout() { return ( div classNameadmin-layout Sidebar / div classNameadmin-main Header / Outlet / /div /div ) }思路基本一致父布局组件内部留着Outlet等子路由来填。React Router的element写法组件和路由的对应关系也扫一眼就懂。骨架搭好之后无论你后续用的是Vue、React还是其他框架理解这个嵌套思想才是最重要的。3. 项目前后台搭建的完整流程前面说的是路由嵌套的基础用法这一节我直接讲一个完整的前后台搭建流程。从一个空项目开始到跑起来一个带前后台分层的应用总共四步。3.1 目录拆分前台与后台分离前后台分离的第一件事不是写路由而是把目录结构先立起来。我的习惯是页面组件按“前台”“后台”分为两级目录公共布局单拎出来放layouts目录。src/ ├── api/ # 接口请求模块 │ ├── front.js # 前台接口 │ └── admin.js # 后台接口 ├── assets/ # 公共资源 ├── components/ # 公共组件 │ ├── common/ # 通用业务组件前后台共用 │ ├── front/ # 仅前台使用的组件 │ └── admin/ # 仅后台使用的组件 ├── layouts/ # 布局组件 ├── router/ # 路由配置 ├── store/ # 状态管理 ├── styles/ # 全局样式 └── views/ ├── front/ # 前台页面 └── admin/ # 后台页面这个拆分方式有一个额外的加成构建时可以做环境区分。比如在这个模拟项目中前台和后台打包成两个子应用部署或者在同一个应用里用不同的路由前缀做隔离。目录先分好了切换成本就会很低。3.2 后台布局与登录态控制的联动后台管理系统还有个绕不开的需求登录校验。没有登录的人不能访问后台页面一旦登录过期就要跳回登录页。这个逻辑如果不加约束你可能会在每个页面组件里复制粘贴一段“判断是否登录”的代码。更好的做法是利用路由守卫在顶层统一拦截。router.beforeEach((to, from, next) { const isLoggedIn localStorage.getItem(token) if (to.path.startsWith(/admin) !isLoggedIn) { next(/login) return } next() })注意这里只是最简单的示例。真实项目里登录状态通常存在store里并且需要异步获取用户信息。遇到这种情况我会在守卫里加上异步等待的逻辑router.beforeEach(async (to, from, next) { const userStore useUserStore() if (!userStore.hasFetched) { try { await userStore.fetchUserInfo() } catch (e) { next(/login) return } } next() })把“获取用户信息”和“校验登录状态”放到同一轮异步流程里避免页面组件自己各查各的。登录之后还需要让前台和后台共用同一个登录态。这里我推荐在用户登录成功后跳转时带上一个redirect参数等登录完直接返回原页。实现方式不复杂核心是登录页读取路由的query// 登录成功后的跳转逻辑 const redirectPath route.query.redirect || /admin/dashboard router.push(redirectPath)3.3 动态路由与权限控制的进阶做法前后台搭好之后权限控制自然会被提上日程。后台管理里常见的权限模型有两种角色权限和接口权限。前端导航菜单的渲染通常依赖角色权限。这一步就用到动态路由了。做法是不在路由表里写死所有后台子路由而是登录后根据用户的角色把有权限的路由动态添加进路由实例。// 根据角色过滤路由配置 const adminRoutes [ { path: dashboard, component: Dashboard }, { path: product, component: Product }, { path: user, component: User } ] function filterRoutesByRole(allRoutes, role) { if (role super_admin) return allRoutes return allRoutes.filter(route route.meta?.roles?.includes(role)) } // 登录后动态添加 const allowedRoutes filterRoutesByRole(adminRoutes, user.role) allowedRoutes.forEach(route { router.addRoute(AdminParentName, route) })这里有两个关键点要留意。第一动态添加路由时要指定父路由的名字否则新路由会被加在根级别布局又会失效。第二动态路由对刷新页面不友好因为刷新后store会重置动态路由需要重新走一遍登录校验和路由添加流程。所以动态路由方案必然伴随着全局守卫里的异步初始化这个前面已经说过了。如果你的项目只是中小型后台我更推荐用相对简单的静态路由菜单过滤方案。即路由表里所有页面都配好但菜单是根据用户角色动态渲染的。用户没有权限的菜单不展示路由记录虽然存在但配合路由守卫做第二层拦截不让越权访问。这样实现起来简单也够用。4. 常见问题与排查技巧实录写到这里把我在实际项目里遇到的、以及带新人时发现的高频问题汇总了一下。这一节的每个问题我都亲手踩过坑按排查顺序给你一个可执行的思路。4.1 嵌套路由页面不渲染的常见原因症状访问/admin/product地址栏路径正确但是内容区一片空白甚至整个页面白屏。排查优先级如下第一看你是否在父布局里写了RouterView。如果父布局组件里只有侧边栏和顶栏没有RouterView那子路由根本没有内容出口自然会渲染成空白。这听起来像是低级错误但特别容易发生在刚开始写嵌套路由的人身上——因为有时代码是照抄的漏掉了最关键的出口组件。第二看子路由的path是否以斜杠开头。以斜杠结尾的路径是绝对路径会脱离父路由前缀。比如你把product写成了/product这个路由就变成了根路径下的路由父布局完全不会参与渲染页面大概率只显示一个白窗或空壳。第三看父路由的component是否正确加载。如果父组件用懒加载且路径写错子路由跟着全部白屏。排查方式就是打开浏览器控制台看Network面板里有没有对应的JS文件报404。第四确认子路由的名称name是唯一的。Vue Router会警告重复的name而且在路由跳转时容易出现跳错组件的诡异问题。出现这种问题先全局搜一遍name字段改掉重复的再说。4.2 404页面在嵌套路由下失效的处理后台管理系统一般都有个自定义404页面要么是“页面不存在”要么是“无权限”。但嵌套路由下404的配置有讲究。如果你把404配置在根路由层级{ path: /:pathMatch(.*)*, component: NotFound }那么它只会匹配根路径下的非法路径。如果你的后台子路由里出现了拼写错误比如访问/admin/produc而非/admin/product200和404的匹配规则会让它先尝试匹配子路由匹配失败后再向上冒泡。这个时候如果根路由没有兜底页面就会空白。我在项目中习惯给每个嵌套层级都加一个兜底子路由保证任何非法子路径都能有响应{ path: /admin, component: AdminLayout, children: [ // 其他业务路由 { path: :pathMatch(.*)*, component: AdminNotFound } ] }这样访问/admin/produc时它会先匹配当前层级的兜底路由渲染一个友好的404提示。对于前台部分同样在根层级加一个通配的404。两层兜底互不干扰。4.3 keep-alive与组件缓存的坑管理后台还有一个常见的体验需求列表页滚动到一半切到详情页再切回来时希望保留列表的状态。这个用keep-alive实现但它和嵌套路由配合时有个容易踩的坑。在Vue 3里keep-alive依赖组件的name字段来匹配缓存。如果你用了Script setup语法组件默认没有name那就无法被缓存。我的做法是在defineOptions里显式声明namescript setup defineOptions({ name: ProductList }) /script template !-- 列表内容 -- /template然后在RouterView外层包裹keep-alive并用:include指定需要缓存的组件名单router-view v-slot{ Component } keep-alive :include[ProductList, OrderList] component :isComponent / /keep-alive /router-view这里要注意用:include数组指定缓存名单比无脑缓存所有页面要好得多。因为后台管理系统的列表页可能有很多状态缓存也意味着内存占用会一直堆着不用的页面及时释放才是健康的。另一个坑是商品列表页里可能有子路由或tab切换比如商品列表和商品详情共用同一个父组件。此时如果include配置不当切回列表时会把详情页的滚动位置也缓存下来体验很割裂。解决办法是拆开成不同页面组件或者在组件内部用onActivated和onDeactivated钩子做状态还原逻辑而不是依赖缓存机制本身去兜底。4.4 权限控制与动态路由的刷新丢失问题前面提到了动态路由刷新页面后会丢失。这个问题如果你遇到排查方向有两个。第一个方向是看全局守卫是否保证了登录用户信息先于路由跳转加载完成。如果用户信息还没拉取路由就已经开始解析那么没有任何一个子路由会被动态添加页面能显示才怪。第二个方向是看动态添加路由的时机。router.addRoute()要在路由跳转发生之前执行。如果你需要在登录页跳转到后台那么动态路由的添加必须在router.push(/admin/dashboard)调用之前同步完成。异步添加会导致第一次跳转找不到路由从而落到404兜底里。我建议的做法是把动态路由的添加过程封装成一个函数放到全局守卫里let addedRoutes null router.beforeEach(async (to, from, next) { const userStore useUserStore() if (!userStore.hasInit) { await userStore.fetchUserInfo() if (userStore.role super_admin) { addedRoutes registerAdminRoutes(router) } } next() })addedRoutes变量用来标记路由是否已经添加过避免每次跳转都重复添加导致路由膨胀。这是一个容易忽略的性能点不加保护的话每跳转一次就重复注册一遍同名的动态路由控制台里会有路由重复的警告严重时还会导致路径匹配异常。最后再奉送一个小技巧如果你愿意在项目里多用一层脑我建议在路由配置里统一维护一个meta字段把面包屑、菜单标题、页面标题、是否需要缓存全都丢进去。这看起来只是一个约定但等后台页面多了以后你会发现菜单渲染、面包屑自动生成、标题动态修改全部可以基于这同一个字段派生出来。路由嵌套的骨架搭好了这些基于路由元信息的统一处理会让项目的整洁度再上一个台阶。我在实际带这个项目时最初只是想着怎么让路由看起来分层合理结果做着做着发现前后台搭建的价值远远不止“布局复用”这么简单。它把登录态控制、权限过滤、页面缓存、菜单渲染这些原本散落在各个页面里的逻辑全部收编到了路由这一层统一治理。项目的前期多花半天设计路由结构后期维护省下来的时间只会更多。如果你也在搭自己的管理后台这个设计思路可以直接照搬遇到问题多翻翻路由表通常答案都在里面。
