Vue进阶(二十九):嵌套路由讲解_vue component children 示例,跟我一起手写EventBus吧

23 阅读3分钟

一、前言

路由嵌套,即在当前路由中注册子路由,形成父子路由,并在父路由中显示子路由对应的组件。子路由内也可以注册它的子路由,一直下去就可以形成一个庞大的“路由家族”。

简单来说,就是在一个路由的页面下,继续使用路由加载新的组件;可以将嵌套路由理解为父子路由,常见的多导航界面通常就是由多层嵌套的组件组合而成。

嵌套路由还有一个优点,就是让新的页面内容展示在父组件的占位符(即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')
        },
        {
**ES6**

*   列举常用的ES6特性:

*   箭头函数需要注意哪些地方?

*   let、const、var

*   拓展:var方式定义的变量有什么样的bug?

*   Set数据结构

*   拓展:数组去重的方法

*   箭头函数this的指向。

*   手写ES6 class继承。



![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b1e74b58980f4de0b842826eaa812ffd~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771413277&x-signature=VTtoWZJOdLa7w%2BXpTYuoQzJxRUc%3D)



**微信小程序**

*   简单描述一下微信小程序的相关文件类型?

*   你是怎么封装微信小程序的数据请求?

*   有哪些参数传值的方法?

*   你使用过哪些方法,来提高微信小程序的应用速度?

*   小程序和原生App哪个好?

*   简述微信小程序原理?

*   分析微信小程序的优劣势

*   怎么解决小程序的异步请求问题?



![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4d3ae03bdf5d4db98813658c8684315a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771413277&x-signature=q4jWvzG8hxkXlzfPFjnuTZ5ewG8%3D)



**其他知识点面试**

*   webpack的原理

*   webpack的loader和plugin的区别?

*   怎么使用webpack对项目进行优化?

*   防抖、节流

*   浏览器的缓存机制

*   描述一下二叉树, 并说明二叉树的几种遍历方式?

*   项目类问题

*   笔试编程题:



![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/59b8e95aebbc479a99dafdb7456aa457~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771413277&x-signature=ujIMIR1fS7T%2BrCe5x7GMR7cXOrQ%3D)



#### 最后



技术栈比较搭,基本用过的东西都是一模一样的。快手终面喜欢问智力题,校招也是终面问智力题,大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了,建议回去补一下。
**开源分享:https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**