页面的vue布局组件和嵌套路由
Container布局容器
用于布局的容器组件,方便快速搭建页面的基本结构:
< el - container > :外层容器。当子元素中包含< el - header >或 < el - footer > 时,全部子元素会垂直上下排列,否则会水平左右排列。
< el - header> :顶栏容器。
< el - aside >:侧边栏容器。
< el - main >:主要区域容器。
< el - footer > :底栏容器。
基于嵌套路由,实现点击侧边栏动态更新页面的局部内容
一级路由:
嵌套路由:
嵌套路由可以使用的方法来实现一个页面中局部内容的动态更新。该布局内容到底显示什么组件,由路由地址决定。例如:
http://localhost:8080/container/button 看到Container中包含Button组件
http://localhost:8080/container/form 看到Container中包含Form组件
http://localhost:8080/container/table 看到Container中包含Table组件
实现步骤:
1、设计一套合理的嵌套路由规则。
2、准备3个组件:Button.vue 、Form.vue 、Table.vue。
3、在合适的位置,添加占位符:< router - view / >
实现点击左侧边栏菜单项,动态跳转到相应的路由
$ router 路由管理器 管理所有的路由(提供了路由跳转等功能)
$ router 当前路由对象 只用于描述当前路由 (提供了当前路由信息的访问)