2-嵌套路由

嵌套路由

URL 中各段动态路径也按某种结构对应嵌套的各层组件

被渲染组件同样可以包含自己的嵌套

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

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置( 以 / 开头的嵌套路径会被当作根路径 )

  const router = new VueRouter({
    routes: [
      { path: '/user/:id', component: User,
        children: [
          {
            path: 'profile', /* /user/:id/profile 匹配成功时，会渲染在User的<router-view>中*/
            component: UserProfile
          },
          {
            path: 'posts', /* /user/:id/posts 匹配成功时，会被渲染在User 的<router-view>中 */
            component: UserPosts
          }
        ]
      }
    ]
  })

<router-view’>

· function 组件，渲染路径匹配到视图组件并且可以内嵌自身
· 可以配合 和 使用且确保在内层使用

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

<router-view’> Props

name:
type: string ( 默认值: “default” )
如果设置了名称，会渲染对应的路由配置中 components 下的相应组件中

  <router-view class="view one"></router-view>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>

  const router = new VueRouter({
    routes: [
      {
        path: '/',
        components: {
          default: Foo,
          a: Bar,
          b: Baz
        }
      }
    ]
  })