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

心已赠人 2023-03-13 02:24 8阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20230312/3228f84a3c1e4f44a873ef8ffed8a976.png