1.路由导航守卫(router.beforeEach())

next()放行 next('/login') 强制跳转
to 将要访问的路径 from 从哪个路径跳转而来

路由导航守卫.png

2.用法:代码实现

Snipaste_2021-03-28_11-08-48.png

3.created和mounted生命周期钩子函数

   打开页面就会触发的函数

4.自定义属性 index element-ui

   步骤:打开官方文档---->在搜索里面搜索  menu -----> ctrl+f 搜索index 找到自定义 
 属性------>里面有index属性用法 值为字符串数据类型------>如果为其他类型会报错:如下 error:  属性数据类型错误

Snipaste_2021-03-28_15-06-23.png

属性绑定:

属性绑定.png

5.router属性(链接点击替代router-link标签)

路由链接官网.png

• 注意：启用vue-router之后，会在激活导航时，以index作为path进行路由跳转

• 意思就是启用了这个路由模式，就会在点击菜单的时候，以当前菜单的index属性的值，作为跳转路由

• 我们之前给二级菜单添加有index属性：只不过属性值是id（Home.vue）

index.png

添加router属性.png

router是简写：:router="true"

• 效果图:

  
  
  110.png

• 用户列表id为：

  
  
  id验证.png

1. 但是这里跳转到/110，感觉有点别扭
2. 数据中还有一个属性path，这个可以用。

• 修改index的值

  
  
  修改index.png

1. 问题：刚刚是subItem.index的时候就没有添加斜杆，但是还是跳转到了/110
2. 那么这里是不是也可以不添加斜杠了？
3. 目前不加没问题，但是到后期的商品添加的时候就会出现问题，所以建议添加上斜杠
4. 从商品添加，再次点击商品列表，会发现跳转不回来（后边的功能）

6.用户列表

6.1 通过路由的形式展示用户列表组件

1. 点击用户列表，应该在右侧显示users界面（下图），而不是单独显示

   
   
   菜单切换界面.png

2. 新建Users.vue：目录components/user/Users.vue

   
   
   uservue.png

3. 注册路由

   
   
   注册路由.png

• Users与welcome显示位置相同，都是home的main区域
• 所以也作为home的子组件存在

6.2 在sessionStorage中保存左侧菜单的激活状态

1. 菜单高亮（激活）效果

   
   
   高亮菜单效果.png

2. 菜单高亮官网属性

   
   
   菜单高亮官网.png

• default-active：是菜单menu的属性，这个属性的值决定哪个菜单高亮显示
• 而这个值与当前激活菜单的index相等
• 如果这个值是/users，那么就让菜单的index值为/users的菜单高亮(激活)
• 思路：
  • 当点击某个二级菜单时，保存当前菜单的index值
  • default-active与保存的这个值进行绑定，这样就可以动态控制哪个菜单高亮

3. 二级菜单添加点击事件，传递当前菜单的index的值

   
   
   二级菜单事件.png

4. 菜单添加default-active属性，与activePath属性进行绑定

   
   
   菜单添加高亮属性.png

• 我们只需要在saveNavState中控制activePath的值即可

5. activePath属性定义

   
   
   激活链接属性定义.png

• 默认值为空，因为不确定默认是哪个

6. activePath初始值

   
   
   初始值.png

• 当界面加载的时候，需要给activePath一个初始值
• 场景：如果选中用户列表之后，刷新界面，我们还需要让用户列表高亮

7. 保存激活链接事件方法

   
   
   激活事件方法.png

• 通过sessionStorage保存：激活链接路径（为了刷新界面的时候，取出，然后再次高亮）
• 给activePath属性赋值，是为了让el-menu中的default-active属性值变化，进而高亮菜单

8. 效果（选中用户列表，刷新之后依然高亮。切换其他二级菜单，也可以实现高亮切换）

   
   
   高亮菜单效果.png

9. 逻辑分析

   
   
   菜单高亮逻辑分析.png