Vue2-黑马（七）

目录：

（1）router-路由嵌套

 （2）router-路由跳转

 （3）router-导航菜单

---

（1）router-路由嵌套

我们有这样的需求，我们已经显示了主页，但是主页里面有，更多的功能，比如说多个管理：学生管理、老师管理等等

这些功能也是一个个组件，这些组件需不需要再主页的某个区域进行切换，当进来的时候是某个管理的，将来点击某个超链接进行切换管理，就用到嵌套路由

在创建几个组件：P1View.vue...这些是主页中需要嵌套的页面

 添加路由需要在路由中的主路由下面添加children的属性：子路由（嵌套路由）

在饱含一些路由的配置，这些路由对应的组件，切换的就是主页中的内容了 

在主页面添加子路由显示的位置：router-view

 访问子路由：p1、p2、p3

主页保持不变，切换它里面的内容

 

 主页一开始并没有包含其中的一个子组件，那么能不能让它一开始就包含其中的一个组件呢？

比如说一开始就包含p1

 需要设置重定向：redirect：使用重定向让它访问主页是们默认显示其中的p1子组件

输入：/  跳转到p1的位置 

 当输入不存在的路径默认什么也不显示：这种情况下，合理的做法让它跳转到404组件页面：

修改路由：

输入不存在路径123：自动跳转到404组件

 那么我们为什么不直接把404的组件页面修改为*呢：它也能实现相应的显示

 当我们访问不存在的路径abc时：路径没有发生改变，这样显示不好

 （2）router-路由跳转

以后主页不会值包含内容，需要把主页划分多个区域，多个区域有各自的功能 

就想element ui的网站主页页面一样划分的多个区域：

 划分页面区域的技术，叫做页面布局，我们可以直接使用element ui给我们提供的布局容器：

上下的： 

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
</el-container>

上中下：

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>

 左右：  

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-main>Main</el-main>
</el-container>

 上左右：

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

上    左（中下） 

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>

左（上下）: 

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

左（上中下 ）

 

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</el-container>

 

 

在aside部分添加侧边栏，加一些超链接：

使用router-link标签：

 

还可以通过写代码实现跳转：

让按钮实现跳转：给按钮添加点击事件：

点击按钮： 

 （3）router-导航菜单

 第一级表签ei-menu：

菜单项：el-menu-item

 图标：i标签

 

二级菜单：el-submenu：

 在导航菜单el-menu后面加router属性，相当于导航菜单，跟路由关联起来啦，在给子项加index属性：

点击子项2：