vue-router 嵌套路由

2019年3月24日09:17:12 发表评论 14 阅读

实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:

借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系。

接着上节创建的 app:

这里的 <router-view> 是最顶层的出口,渲染最高级路由匹配到的组件。同样地,一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如,在 User 组件的模板添加一个 <router-view>

要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置:

要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

你会发现,children 配置就是像 routes 配置一样的路由配置数组,所以呢,你可以嵌套多层路由。

此时,基于上面的配置,当你访问 /user/foo 时,User 的出口是不会渲染任何东西,这是因为没有匹配到合适的子路由。如果你想要渲染点什么,可以提供一个 空的 子路由:

 

  • 微信号:sqymail
  • 微信扫一扫欢迎加我为好
  • weinxin
  • 交流QQ群号:248249544
  • IntelliJ IDEA,Java 技术交流
  • weinxin

发表评论

您必须登录才能发表评论!