Vue嵌套路由 二级路由等详解

什么是嵌套路由？

以前使用 VueRouter 通过路由控制页面显示时，都只使用了一级路由：

http://localhost:8080/login 看到App.vue中的<router-view/> 显示Login
http://localhost:8080/nav 看到App.vue中的<router-view/> 显示Nav
http://localhost:8080/vfor 看到App.vue中的<router-view/> 显示VFor

至此发现有一些需求，需要在一级路由组件内部还要再次设计二级路由，从而实现页面的局部更新：

http://localhost:8080/component/container
http://localhost:8080/component/table
http://localhost:8080/component/form
......

上述路由的设计可以看到Component组件，在该组件中嵌套了一个, 可以根据二级路由地址动态显 示局部内容。

实现步骤

• 先准备好子组件 
• 配置嵌套路由： children 
• 在需要映射中添加 <router-view> 组件来承载二级路由的页面内容。

然后就可以了