Vue3里router-view嵌套怎么用才顺手？常见坑有哪些怎么避？

其实刚接触Vue3路由的时候,我也踩过不少嵌套router-view的坑：比如子页面突然整个不显示，或者父组件的导航栏、底部栏不见了，甚至动态参数传递到子路由里直接为空，后来翻了官方文档，又结合自己做的三个不同类型的项目（电商详情页嵌套规格选择、后台管理系统嵌套菜单内容区、旅游攻略页嵌套评论列表和相关推荐），慢慢摸出了一套顺手的流程和避坑指南，今天就把这些内容整理成大家能看懂的日常内容，帮你少走弯路。

先搞清楚“为什么要用嵌套router-view”

在讲用法之前,先得明白它存在的意义——不是为了炫技，而是为了复用布局和简化路由逻辑，举个最直观的例子：你做一个电商的个人中心，个人中心的左侧有固定的“我的订单”“我的收藏”“地址管理”导航，不管点哪个导航，左侧都不变，右侧显示对应的内容，这时候如果不用嵌套，就得在每个“订单/收藏/地址”页面里都写一遍左侧导航，不仅代码重复度高，改个导航样式或者链接都得改好几个地方，太麻烦，用嵌套的话，左侧导航放在父路由对应的组件里，把需要切换的内容区域留出来放嵌套router-view，所有子路由都挂载在这个父路由下面，切换的时候只渲染右侧的内容，左侧不动，代码瞬间清爽，维护也方便。

嵌套router-view的基础操作步骤

基础操作其实不算难,只要跟着官方的逻辑走就行，但有些细节容易漏，我给你们标出来了，别踩。

第一步：先理清楚“父路由-子路由”的层级关系

别一开始就写代码,先拿纸或者思维导图画个层级图，比如个人中心的例子：

• 根路径的父级？哦不对，根路径（/）通常是首页，个人中心可以作为根路径的子路由，路径设为/user
• user下面的子路由分别是：
  • /user/order → 我的订单
  • /user/favorite → 我的收藏
  • /user/address → 地址管理 这里要注意：子路由的path开头不能加斜杠（/），如果加了斜杠，就会变成绝对路径，直接覆盖根路径或者父路径的部分，嵌套就失效了。

第二步：在路由配置文件里写好嵌套规则

路由配置文件一般是src/router/index.js或者index.ts，Vue3用的是createRouter函数，不管是hash模式还是history模式，结构差不多，嵌套路由的写法是在父路由的children数组里加子路由对象，每个子路由对象必须有path和component属性，name属性可以加也可以不加，但加了之后跳转用name更方便，不会因为改路径而改一堆跳转代码。 对了，这里还有个细节：如果父路由本身没有自己的“默认内容”（也就是刚进入/user的时候，右侧不想空着或者不想写一个额外的欢迎页），可以把子路由里第一个对象的path设为空字符串''，这样刚进入/user的时候，就会自动渲染这个空路径对应的子组件，比如把我的订单设为默认内容，就把/user/order的path改成''，这样层级图虽然画的是/user/order，但实际访问/user也能直接到订单页，用户体验更好。

第三步：在父组件里插入嵌套router-view标签

这个是最核心的一步——你留了坑才能填子组件对吧？父组件（也就是个人中心的组件，比如User.vue）里，左侧导航的代码写完之后，右侧需要切换内容的地方，直接放一个标签就行，和Vue2的写法一样，但Vue3里如果用了这种插槽写法，后面能加缓存或者过渡效果，这个后面讲进阶用法的时候会说。

进阶小技巧：让嵌套router-view更好用

基础操作学会了之后,可以加几个小技巧，让你的项目体验感和开发效率都提升。

用keep-alive给嵌套的子组件加缓存

还是拿个人中心举例子：你在“我的订单”里筛选了“未发货”的订单，然后点了“我的收藏”，再点回来“我的订单”，如果不加缓存，筛选条件就没了，得重新选，用户体验很差，这时候就可以用Vue3的组件配合router-view的v-slot插槽来缓存。 具体写法是在父组件的嵌套router-view外面包一层，然后用v-slot拿到要渲染的Component组件，再用来渲染，哦对了，如果你只想缓存部分子组件，不想所有的都缓存，可以用keep-alive的include或者exclude属性，include属性接收一个数组或者字符串，里面放的是子组件的name值（注意是组件内部的name选项，不是路由配置里的name），exclude则相反。

用transition给嵌套的子组件加过渡效果

加个淡入淡出或者左右滑动的过渡效果,页面切换会更丝滑，这个也是配合v-slot插槽来做的，写法是在keep-alive外面（或者里面，视情况而定，一般是keep-alive在外面，transition在里面包裹）加一个标签，然后给transition加name属性，比如name="slide-left"，然后在css里写对应的过渡动画。 这里有个小坑：如果父组件本身没有设置固定的宽高，或者嵌套router-view的父容器没有设置固定的宽高，过渡动画可能会失效或者卡顿，所以最好给嵌套router-view的父容器加个position: relative; width: 100%; height: calc(100vh - 导航栏高度); overflow: hidden;这种样式，确保过渡的时候有固定的空间。

动态路由参数传递给嵌套子路由

有时候父路由或者上一级子路由有动态参数,需要传递给下一级嵌套子路由，比如电商详情页（/product/:id）下面有规格选择页（/product/:id/spec），这时候怎么把id传过去呢？其实很简单，路由配置里子路由的path里直接写:id就行，不用手动传递，Vue Router会自动把父路由的动态参数合并到子路由的$route.params里。 不过这里有个注意点：如果你在子路由的组件里用的是Vue3的setup()函数，而且没有用useRouter和useRoute这两个组合式API，而是直接用this的话，会报错，因为Vue3的setup()函数里没有this，所以记得要用import { useRoute } from 'vue-router'，然后在setup()里const route = useRoute()，这样就能通过route.params.id拿到动态参数了。

新手最容易踩的3个嵌套router-view坑，赶紧记下来避坑

前面说了细节和技巧,现在说新手最容易踩的3个坑，我刚开始做项目的时候踩了前两个，第三个是帮同事改bug的时候发现的，都是很典型的。

坑一：子路由的path加了斜杠，导致嵌套失效

这个是新手最常犯的错误,没有之一！刚才在基础操作步骤里已经强调过了，再举个反面例子： 错误的路由配置：

{
  path: '/user',
  component: User,
  children: [
    {
      path: '/order', // 这里加了斜杠，变成绝对路径了
      component: UserOrder
    }
  ]
}

这时候你点击跳转到'/order'，会发现整个页面都变成了UserOrder组件，左侧的导航栏不见了，因为加了斜杠之后，UserOrder组件直接挂载到了根路径的router-view里，而不是/User下面的嵌套router-view里，正确的写法是把path改成'order'或者''（如果是默认内容）。

坑二：父组件里忘记插入嵌套router-view标签

这个坑听起来很离谱,但真的很多人会犯！尤其是刚从单页面跳转（没有嵌套）转到嵌套路由开发的人，写完父组件的代码之后，直接去写子路由的代码，然后发现子页面怎么都不显示，检查路由配置检查了半天，甚至重启了项目，都找不到原因，最后才发现父组件里没有加标签，所以写完路由配置之后，第一时间去父组件里加这个标签，养成习惯。

坑三：keep-alive的include属性用了路由配置里的name，而不是组件内部的name选项

刚才在进阶技巧一里也提到过,这个坑我帮同事改了好久才发现，keep-alive的include/exclude属性识别的是组件内部通过export default { name: '组件名' }这种方式定义的name值，而不是路由配置里的name属性，比如你的路由配置里子路由的name是'UserOrder'，但组件内部的name是'order'，这时候你在include里写['UserOrder']是没用的，子组件不会被缓存，必须写['order']才行。

嵌套router-view是Vue3路由开发里非常重要的一个功能，只要搞清楚层级关系，写好路由配置，在父组件里插入标签，就能实现布局复用和简化逻辑，进阶的时候可以加keep-alive缓存和transition过渡效果，提升用户体验，最后一定要记得避开那三个常见坑，不然会浪费很多时间。 其实Vue Router的功能还有很多，比如路由守卫、懒加载、重定向等等，但嵌套router-view是这些功能的基础，先把基础打牢，再去学其他的，会轻松很多，如果你们还有其他关于Vue3 router-view的问题，可以在评论区留言，我会尽量回复的。