2024年前端最新Vue进阶（二十九）：嵌套路由讲解_vue component children 示例，阿里前端三面

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

嵌套路由还有一个优点，就是让新的页面内容展示在父组件的占位符（即router-view标签）中，这样有利于页面结构的搭建，结构清晰。

那么，如何注册子路由呢？

Vue路由定义中需要用到一个children属性，其值为数组，数组中的每一项对应一个子路由。

二、码上谈兵

示例代码如下:

<template id="tmpl">
  <div>
    <h1>这是 Account 组件</h1>

    <router-link to="/account/login">登录</router-link>
    <router-link to="/account/register">注册</router-link>

    <router-view></router-view>
  </div>
</template>

路由配置文件如下：

routes: [
  {
    path: '/account',
    component: account,
    // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便去理解URL地址
    children: [
      { path: 'login', component: login },
      { path: 'register', component: register }
    ]
  }
  // { path: '/account/login', component: login },
  // { path: '/account/register', component: register }
]

还可以优化以上处理逻辑，在home路由对应的组件加载到页面时，若需要默认加载一个子路由时，可以做一个重定向，在home路由中redirect:"重定向的子路由网址"。这个时候加载home页面时默认会加一个子路由。

代码：默认显示home2

{
    path:"/home",
    name:"home",
    component:()=>import('../views/home/index.vue'),
    redirect:"/home/home2",//当网址为/home时重定向到/home/home2
    children:[
        {
            path:"home1",
            name:"home1",
            component:()=>import('../views/home/home1/index.vue')
        },
        {
            path:"home2",
            name:"home2",
            component:()=>import('../views/home/home2/index.vue')
        },
        {
            path:"home3",
            name:"home3",
            component:()=>import('../views/home/home3/index.vue')
最后
--

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> 最后写上我自己一直喜欢的一句名言：`世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它`
> ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6L3lnVUFXMUlsN2FRMlNlT2VueEF1QTMxNDlEQmRDMlU0bzBpY21pYVloa2szeXVFZmNydGV4MGYxSWljdFJGNU9RYUw5TWJHb0hiTmtWQlBQUGliTng0RWJpY0EvNjQw?x-oss-process=image/format,png)



ZmNydGV4MGYxSWljdFJGNU9RYUw5TWJHb0hiTmtWQlBQUGliTng0RWJpY0EvNjQw?x-oss-process=image/format,png)