Vue Router的嵌套路由

嵌套路由

嵌套路由可能是日常应用中最常用到的，使用起来也非常简单。嵌套路由的思路就是在页面（page）或者组件（component）中渲染另外一个页面（page）或者组件（component），那么就简单了，其实跟之前需要干的事是一样的：
1.将子组件或者子页面映射到子路由中去
2.告诉页面或者组件在哪里去渲染子组件或子页面

例子也很简单，就直接利用官网的例子吧。

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

这是需要嵌套的父组件，router-view处就是路由的渲染出口，也就是子组件渲染的地方。

const router = new VueRouter({
  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
        }
      ]
    }
  ]})

可以看到当路径是user/:id/profile时就会匹配到组件UserProfile，而路径是user/:id/posts时就会匹配到组件UserPosts，其中:id是动态路由参数，可以看一下官网，其实很简单，就是多个路由匹配到一个组件上，并且这个动态路由参数可以被存在this.$route.params中。

当然需要注意的一点是子路由的路径不要以/开头，如果以/开头的话会默认被当做根路径，这样的好处就是使用嵌套的时候无需考虑嵌套的路径，只需要递归的嵌套就可以了。