0
点赞
收藏
分享

微信扫一扫

4.1 补充:解决主页中侧边栏切换的小问题

艾米吖 2022-02-06 阅读 65

1. 问题描述:

  1. 点击不同的二级标题,要进行标题的高亮切换
  2. 基于 menu 的default-active属性 去解决。

在这里插入图片描述

2. 老师的解决方案总结如下:

  1. 在data()节点下定义一个activePath变量,来控制高亮的切换。
  2. 在methods节点下,定义一个函数saveNavState (activePath),通过会话存储sessionStorage来保存传递过来的值activePath,也就是二级标题传递过来的index(即:路径)。
  3. 触发点击事件时,改变this.activePath。
  4. created()函数中也改变this.activePath,将sessionStorage中存储的值赋过去。当点击浏览器的刷新按钮时,触发created钩子。

具体如下:

在这里插入图片描述

methods节点下:

 // 保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }

created():

 created () {
    this.getMenuList()
    console.log(this)
    this.activePath = window.sessionStorage.getItem('activePath')
  }

3. 自己设想的解决方法—利用this.$route.path

回忆起 this. r o u t e . p a t h 可 以 表 示 当 前 地 址 栏 中 的 路 径 。 可 以 动 态 绑 定 d e f a u l t − a c t i v e 的 值 为 t h i s . route.path 可以表示当前地址栏中的路径。可以动态绑定default-active的值为this. route.pathdefaultactivethis.route.path。也可以做到点击不同的二级标题时高亮的切换,并且刷新页面时也是有效的。这种方法也更简洁

在这里插入图片描述
但是,当我手动更改地址栏的部分地址时,仍然不行。如:把 /users 改成 /rights,发现虽然右边的组件改变了,但是左侧的侧边栏不变

在这里插入图片描述
至此,我的方法也不够完善。

手动更改无法生效的原因如下

因此,vue-router 同一个页面地址栏参数改变(比如文章的发布和编辑是同一个页面),不会触发vue的created或者mounted钩子,所以数据不会重新渲染。(我也懂了,这也是为什么我在created()中打印this时,只有点击浏览器的刷新按钮,才会打印成功。)

在这里插入图片描述

4. 最后的解决方案

查阅资料,加入了watch侦听器侦听地址栏的变化,以此改变activePath的值。最后完成了改变地址栏的同时,左侧侧边栏效果随之改变。

// 监听地址栏的变化
  watch: {
    $route (to, from) {
      console.log(to)
      this.activePath = to.path
    }
举报

相关推荐

0 条评论