Vue Router 嵌套路由

嵌套路由

一些应用程序的UI由多层嵌套的组件组成。对于组件中仍旧需要动态渲染组件的情况，就需要嵌套路由。

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

其中$route.params.id为获取路由中的动态段。如果是在js中，则需要加上this。

在组件中使用<router-view>(嵌套组件)，还需要在路由中配置：

{
        path: '/user/:id',
        name: 'User',
        component: User,
        children: [
            {
                path: 'profile',
                component: UserProfile
            }
        ]
    }

当/user/:id/profile匹配成功，UserProfile将被渲染到User的<router-view>中。

注意：对于嵌套组件来说，它的父组件仍旧加载，改变的只是children的那部分。

以/开头的嵌套路径将被视为根路径，这允许你利用组件嵌套，而不必使用嵌套的URL：

{
        path: '/user/:id',
        name: 'User',
        component: User,
        children: [
            {
                path: '/profile',
                component: UserProfile
            }
        ]
    }

当/profile匹配成功(前面没有父路由路径)，UserProfile将被渲染到User的<router-view>中。

不想匹配任何嵌套路径，但希望组件中的<router-view>能动态渲染一些东西：

{
        path: '/user/:id',
        name: 'User',
        component: User,
        children: [
            {
                path: '',
                component: UserHome
            }
        ]
    }

当/user/:id匹配成功，UserHome将被渲染到User的<router-view>中。