Vue-project过程

页面的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 当前路由对象  只用于描述当前路由 （提供了当前路由信息的访问）