vue写一个侧边导航栏，并且实现页面跳转，浏览器刷新/返回的高亮显示

运用到的技术：vue+element-ui

大体侧边导航栏如下所示： 

 

<template>
  <div id="homeAside" class="clearfix">
    <div class="homeAside clearfix">
      <el-row class="tac">
        <el-col :span="12">
          <el-menu
            :default-active="'1'"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#fff"
          >
            <el-menu-item
              index="onlineQuery"
              :class="{blue: showid == 'onlineQuery'}"
              @click="goUrl('onlineQuery')"
            >
              <template slot="title" class="txts">
                <img src="../assets/navs/online.png" class="icons_img" />
                <span>在线查询</span>
                <i class="el-icon-arrow-right Icon"></i>
              </template>
            </el-menu-item>
            
             <!--  ...........这里为其它导航栏标签页内容，已省略，自行添加-->
            
             
            <el-menu-item
              index="userManage"
              :class="{blue: showid == 'userManage'}"
              @click="goUrl('userManage')"
            >
              <template slot="title" class="txts">
                <img src="../assets/navs/user.png" class="icons_img" />
                <span>用户管理</span>
                <i class="el-icon-arrow-right Icon"></i>
              </template>
            </el-menu-item> 
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
 
export default {
  name: "homeAside",
  data() {
    return {
      showid: null
    };
  },
  created() {
    let url = this.$route.path;
    let arr = url.split("/");
    this.showid = arr[2];
  },
  watch: {
    $route() {
      //路由变化时就重新执行这个方法 更新传来的参数
      this.getRouter();
    }
  },
  methods: {
    //监听路由动态
    getRouter() {
    // console.log(this.$route.path);//为当前所在页面路由
      let url = this.$route.path;
      let arr = url.split("/");
      this.showid = arr[2];
    },
    goUrl(val) {

      this.showid = val;
      this.$router.push({ name: val, query: { id: val } });

      // console.log(this.$route.query.id);
    }
  }
};
</script>
 
<style lang="less">
#homeAside {
  .homeAside {
    .blue {//点击所在导航栏标签页时添加的样式
      background-color: #409eff !important;
      
    }
    .txts {
      color: #909399 !important;
    }
    .el-menu-item {
      position: relative;
    }
    .Icon {
      position: absolute;
      top: 19px;
      right: 3px;
      color: #dad2d2;
    }
    .el-menu {
      border: none !important;
    }
    .icons_img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
  }
}
</style>