VueRouter路由嵌套

1. 前言

本小节我们介绍如何嵌套使用 VueRouter。嵌套路由在日常的开发中非常常见,如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置路由。

2. 配置嵌套路由

实际项目中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:

/article/vue                          /article/react
+------------------+                  +-----------------+
| Article          |                  | Article         |
| +--------------+ |                  | +-------------+ |
| | Vue          | |  +------------>  | | React       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系。
在上一小节中我们学习了如何配置一个路由信息:

  {
    path: '路由地址',
    component: '渲染组件'
  }

要配置嵌套路由,我们需要在配置的参数中使用 children 属性:

  {
    path: '路由地址',
    component: '渲染组件',
    children: [
      {
        path: '路由地址',
        component: '渲染组件'
      }
    ]
  }

2.1 基本使用

接下来我们对上一小节的例子来做一个改造:在文章页面,我们对文章进行分类,提供两个链接按钮 vue、react,点击可以跳转到对应的文章列表,具体代码示例如下:

实例演示
预览 复制