50+Vue经典面试题源码级详解（48）：在什么场景下会用到嵌套路由？

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

前言

小伙伴们好，这是村长《Vue经典面试题源码级详解》系列文章第 48 题，前面已完成题目合集在此： 历时一个月，2.6W字！50+Vue经典面试题源码级详解，你值得收藏！

学习群

我组织了一个面试学习群，关注村长公众号村长学前端，回复“加群”，大家一起卷~

相关学习资源

本系列有配套视频，思维导图和开源项目，大家学习同时千万不要忘了三连 + 关注 + 分享，有道是喝水不忘挖井人~

• 视频教程：56道经典Vue面试题详解
• 思维导图：Vue面试专题
• 配套代码：vue-interview

在什么场景下会用到嵌套路由？

分析

应用的有些界面是由多层级组件组合而来的，这种情况下，url各部分通常对应某个嵌套的组件，vue-router中就可以使用嵌套路由表示这种关系：router.vuejs.org/guide/essen…

---

体验

定义嵌套路由，对应上图嵌套关系：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // UserProfile 会被渲染在 User 组件中的 <router-view> 里
        path: 'profile',
        component: UserProfile,
      },
      {
        // UserPosts 会被渲染在 User 组件中的 <router-view> 里
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

---

思路

• 概念和使用场景
• 使用方式
• 实现原理

---

回答范例

• 平时开发中，应用的有些界面是由多层级组件组合而来的，这种情况下，url各部分通常对应某个嵌套的组件，vue-router中可以使用嵌套路由表示这种关系
• 表现形式是在两个路由间切换时，它们有公用的视图内容。此时通常提取一个父组件，内部放上<router-view>，从而形成物理上的嵌套，和逻辑上的嵌套对应起来
• 定义嵌套路由时使用children属性组织嵌套关系
• 原理上是在router-view组件内部判断当前router-view处于嵌套层级的深度，讲这个深度作为匹配组件数组matched的索引，获取对应渲染组件，渲染之

---

知其所以然

router-view获取自己所在的深度：默认0，加1之后传给后代，同时根据深度获取匹配路由。