首页 > 其他 > 详细

Vue-Router嵌套路由

时间:2019-03-06 13:19:54      阅读:127      评论:0      收藏:0      [点我收藏+]

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嵌套路由

原文:https://www.cnblogs.com/panrui1994/p/9136554.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!