Vue-Router嵌套路由

1:查看router-view所对应的位置,是属于顶级出口还是存在于某个组件当中

2:当router-view存在于某个组件当中时

const User = {

  template: `

    <div class="user">

      <h2>User {{ $route.params.id }}</h2>

      <router-view></router-view>

    </div>

  `

}

　　那么我们在路由文件中,定义对应user的路由当中,需要添加子路由形式

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 匹配成功，

        // UserHome 会被渲染在 User 的 <router-view> 中

        { path: '', component: UserHome },

      ]

    }

  ]

})

** 以'/'开头的嵌套路径会被当作根路径,合理的模式是给每个级别的路由都添加空的子路由

巴特西

Vue-Router嵌套路由

最新文章

热门文章