多层嵌套的前端界面

示例代码

const User = {
  template: `
    <div class="user">
      <!--子路由出口， profile/posts組件 -->
      <router-view/>
    </div>
  `
}

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
        }
      ]
    }
  ]
})

注意

  1. 以 / 开头的嵌套路径会被当作根路径， 使用嵌套组件而无须设置嵌套的路径；

  2. children 相当于 routes 配置一样的路由配置数组；

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 多层嵌套的前端界面
  2. 2. 示例代码
  3. 3. 注意