（一）页面布局
在提供的基础工程中，最基本的页面布局，已经准备好了。 我们通过页面原型可以看到页面的布局如下：
其实要实现这个页面布局，我们可以借助于 ElementPlus 中提供的 container 容器布局。
Container布局容器，用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
查看导入进来的文件首先先进入口文件main.js查看引入了哪些文件然后再查看根组件App.vue他引入了另一个组件就是一个布局的组件, 然后在这个组件当中它定义了页面的布局写在了HTML当中标签内其中呢，还有很多组件他都写在views这个包当中定义了很多的子组件
页面布局
左侧菜单布局
然后就可以参考其提供的源码，复制到我们的侧边栏部分 <el-aside> ... </el-aside>，然后根据我们案例的需要进行改造，改造成我们需要的样子即可。
最终左侧菜单栏的代码如下 ，大家可以直接导入到 views/layout/index.vue 的侧边栏区域 <el-aside> ... </el-aside> ：
目前，我们点击左侧的菜单，右侧主区域展示的内容，还不能做到动态变化。 那应该如何做到动态变化呢 ？
要解决这个问题，就需要通过VueRouter来解决。
动态菜单（路由）
-
Vue Router：Vue的官方路由。 为Vue提供富有表现力、可配置的、方便的路由。
-
Vue中的路由，主要定义的是路径与组件之间的对应关系。
VueRouter主要由以下三个部分组成，如下所示
-
VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
-
<router-link>：请求链接组件，浏览器会解析成<a>
-
<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
基础路由配置
1). 在 views/layout/index.vue 中，调整代码，具体调整位置如下：
-
在左侧菜单栏的
<el-menu>标签上添加router属性，这会让 Element Plus 的<el-menu>组件自动根据路由来激活对应的菜单项。 -
使用
<router-view>组件来渲染根据路由动态变化的内容。 -
确保每个
<el-menu-item>的index属性值与你想要导航到的路径相匹配。
vue路由是 描述路径与组件的关系 他有三个部分组成有路由的实例一般就记录了配置路由的信息还有链接组件和动态视图组件链接组件他最后会被解析成超链接组件而动态视图组件它是通过展示的
还有一个就是vue-router这个模式如果启动了，这个模式他会以index为地址作为跳转 如果你不开启这个模式你要为所有的子菜单添加<router-link>标签
然后在在 router/index.js 中配置请求路径与组件之间的关系。
使用步骤通过引入方式 然后在引用
path当中填写要访问的路径 然后再componet展示相应的组件
在这添加要动态视图组件它是通过展示的
login(改善)嵌套路由
具体的执行访问流程如下:
上述我们只是完成了最基本的路由配置。 并经过测试我们发现，如果我们访问 /login 路径，会发现，登录页面是在layout页面中嵌套展示的，这肯定是不合适的。
那接下来，我们就来优化一下路由的配置。最终配置形式如下，在 router/index.js 中做如下配置
-
当点击左侧菜单栏的员工管理菜单时，最终地址栏会访问路径
/emp。 -
此时VueRouter，会自动的到所配置的路由表（
router/index.js）中，查找与该路径对应的组件，并展示在路由展示组件<router-view>对应的位置中。
嵌套路由
当我们在访问我们的vue项目的时候他先访问的是app.vue根组件在他里面，
我们发现引入了一个组件他直接把布局页面写死了
只要我们访问当前的项目最终访问的都是这个布局页面，
在基础的布局页面的基础上再来进行页面的渲染
所以我们不能把他写死，我们要通过动态路由组件把它展示出来
所以要在根组件加上router-view
他就会根据路由进行匹配
如果是登录页面他就是登录页面如果不是登录页面其他的路径
我们需要将布局页面展示出来 ，这里我们要用到嵌套路由
如何使用嵌套路由我们需要在配置路由的当中添加一个属性children在他里面配置子路由
最终页面匹配是这样他的父路由是这个先匹配二级路由里面的组件匹配不到再匹配登录的组件
这里我们要再修改一下如果你要默认访问你这个路由地址他后面是有一个默认的斜杠的，
这里我们要默认把首页展示出来所以我们要加上redirect 这个叫重定向
