Vue Router(3)

嵌套路由

一些应用程序的UI由多层嵌套的组件组成。在这种情况下，URL的片段通常对应于特定的嵌套组件结构，例如：

      /user/johnny/profile                  /user/johnny/posts
      +------------------+                  +-----------------+
      | User             |                  | User            |
      | +--------------+ |                  | +-------------+ |
      | | Profile      | |  +------------>  | | Posts       | |
      | |              | |                  | |             | |
      | +--------------+ |                  | +-------------+ |
      +------------------+                  +-----------------+

 

 通过 Vue Router， 你可以使用嵌套路由配置来表达这种关系

<div id="app">
  <router-view></router-view>
</div>

 

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

// 这些都会传递给 `createRouter`
const routes = [{ path: '/user/:id', component: User }]

 

上述的 <router-view> 是一个顶层的 router-view，它渲染顶层路由匹配的组件，同样地，一个被渲染的组件也可以包含自己嵌套的。例如，我们在 User 组件的模板内添加一个 <router-view>

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `,
}

 

要将组件渲染到这个嵌套的 router-view 中， 我们需要在路由中配置 children

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功
        // UserProfile 将被渲染到 User 的 <router-view> 内部
        path: 'profile',
        component: UserProfile,
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

 （注意，以 /  开头的嵌套路径被视为根路径

 

如你所见， children 配置只是另一个路由数组， 就像 routes 本身一样。因此，你可以根据自己的需要，不断地嵌套视图。此时，按照上面的配置，当你访问  /user/eduardo 时， 在 User 的 router-view 里面都不会呈现，因为没有匹配到嵌套路由。也许你确实想在哪里渲染一些东西，在这种情况下，你可以提供一个空的嵌套路径：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      // 当 /user/:id 匹配成功
      // UserHome 将被渲染到 User 的 <router-view> 内部
      { path: '', component: UserHome },

      // ...其他子路由
    ],
  },
]