vue+jquery刷新界面默认选中侧边菜单栏

之前项目要求刷新界面时要默认选中当前路径的侧边菜单栏，如果侧边菜单栏如果没有当前路径，则选中上一页的菜单

首先使用vue的watch监控一下路由的变化值

watch: {
    $route(to, from) {
      if(from.path != ""){
        sessionStorage.setItem("lastPath",from.path);
      }
    }
  }

加一个判断是用来判断用户是否通过刷新来更改的路由，如果是通过刷新，from.path则会为""

再将存入session的上一个页面的路由取出来

//获取上一个页面的路由
    this.lastPath = sessionStorage.getItem("lastPath");
//调用我自己写的刷新路由方法， 这个sidebar_nav是我引入的js的名称 open_sidebar是我的方法名
    sidebar_nav.open_sidebar(this.$route.path,this.lastPath);

现在我们获取到了当前路径和上一个路径现在可以开始最关键的操作了
我路由用的是hash 没有用history模式 所以路径会加一个#

//首先获取到与当前路由匹配的路径的a标签，然后获取其父菜单并将其打开
 $(".sidebar-nav").find(`a[href="#${path}"]`).parents("dd").show();  
//之后再给其父元素添加
$(".sidebar-nav").find(`a[href="#${path}"]`).parents("dd").prev().addClass("cur");

//判断一下，如果没有找到与当前路径相匹配的菜单，则去寻找和上一页相匹配的菜单
if($(".sidebar-nav").find(`a[href="#${path}"]`).length == 0){
//展开父菜单栏
    $(".sidebar-nav").find(`a[href="#${lastPath}"]`).parents("dd").show();
//选中父菜单栏的样式
    $(".sidebar-nav").find(`a[href="#${lastPath}"]`).parents("dd").prev().addClass("cur");
//选中上一页菜单
    $(".sidebar-nav").find(`a[href="#${lastPath}"]`).addClass("cur");
}

最后附上完整代码

function open_sidebar(path, lastPath) {
  if ($(".sidebar-nav").find(`a[href="#${path}"]`).length == 0) {
    $(".sidebar-nav")
      .find(`a[href="#${lastPath}"]`)
      .parents("dd")
      .show();
    $(".sidebar-nav")
      .find(`a[href="#${lastPath}"]`)
      .parents("dd")
      .prev()
      .addClass("cur");
    $(".sidebar-nav")
      .find(`a[href="#${lastPath}"]`)
      .addClass("cur");
  } else {
    $(".sidebar-nav")
      .find(`a[href="#${path}"]`)
      .parents("dd")
      .show();
    $(".sidebar-nav")
      .find(`a[href="#${path}"]`)
      .parents("dd")
      .prev()
      .addClass("cur");
  }
}

附上效果图
优化之前刷新是这样的

TIM图片20190329110457.png

优化之后刷新是这样的

TIM图片20190329110515.png

我个人比较习惯用jquery 所以我才会在vue里面使用jquery 如果大家有更好的想法或者意见可以教导我一下，谢谢