vue-router 嵌套路由

最新推荐文章于 2022-11-18 16:39:25 发布

weixin_30388677

最新推荐文章于 2022-11-18 16:39:25 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mengfangui/p/9154835.html

本文详细介绍了 Vue Router 中如何配置子路由，并通过具体示例解释了如何在父级路由中渲染不同组件的方法。当访问特定路径时，可以通过定义空子路由来确保父级组件始终能渲染某个默认组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个空的子路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})