Vue ElementUI主页面搭建和导航栏使用，并在刷新页面的时候选中状态消失的问题解决

<template>
  <div style="height:100%;width: 100%; padding:0 auto; margin: 0 auto;">
    <el-container style="height:100%; width: 100%; ">
      <el-header class="header">
        <el-row type="flex" justify="end">
          <el-col  style="flex: 1">
            <div class="logo">
              <img src="./assets/logo.png" height="20" width="20" />
              <span class="span">X
XX下分公司</span>
            </div>
          </el-col>
          
          <el-menu
            :default-active="defaultActive"
            :default-openeds="openeds"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#ffca28"
            active-text-color="#000"
            text-color="#666"
          >
            <el-menu-item index="1">
              <router-link to="/home" tag="div">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link to="/product" tag="div">产品服务</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <router-link to="/price" tag="div">服务价格</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <router-link to="/experience" tag="div">免费体验</router-link>
            </el-menu-item>
            
          </el-menu>
        </el-row>
      </el-header>
      <el-main>
        <span v-text="defaultActive"></span>
        <router-view></router-view>
      </el-main>
      <el-footer>
        <p>
          Copyright © 2019 阿里巴巴
          <br />
          <span>京ICP备11008151号-6京公网安备11010802014853</span>
        </p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {


  data() {
    return {
      activeName: "second",
      defaultActive: "1",
      openeds:[ "1" , "2" , "3","4"],
      navConfig: {
        "home": "1",
        "product": "2",
        "price": "3",
        "experience": "4"
      }
    };
  },

  methods: {
   

  },
  mounted(){
    var _this =this;
    var href =window.location.href;
    href=href.split("/")[href.split("/").length-1]
    console.log(href);
    _this.defaultActive=_this.navConfig[href]
  }
};
</script>

<style>
.header {
  padding-top: 0px;
  margin-top: 0px;
  padding: 0 auto;

  background: #ffca28;
}
.el-row {
  margin-bottom: 1px;
}
.span {
  color: black;

  font-size: 16px;
}
.el-col {
  text-align: center;
  height: 60px;
}
a {
  text-decoration: none;
}
.logo {
  display: flex;
  height: 60px;
  color: white;
  font-size: 18px;
   margin: 0 auto;
  align-items: center;
}
.ellink {
  text-align: center;
  height: 60px;
  color: white;
  font-size: 19px;
}
.bg-purple {
  text-align: center;
  align-items: center;
  margin: 0 auto;
  align-self: center;
}
.router-link-active {
  text-decoration: none;
}
.router-link {
  text-decoration: none;
}
.menu {
  display: flex;
}
.menu.el-menu {
  align-items: flex-end;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.menu {
  flex: 1;
  text-align: right;
}
.row-bg {
  height: 100%;
  align-content: center;
  align-items: center;
  padding: 10px 0;
  background-color: #ffca28;
}
.el-main {
  background-color: #e9eef3;
  color: #3f2222;
  margin: 0 auto;
  height: calc(100%-120px);
  text-align: center;
  width: 100%;
}
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  width: 100%;
  margin: 0 auto;
}

html,
body {
  height: 100%;
}
</style>