vue导航栏实时获取URL设置当前样式，刷新也存在！

很low 别喷，

template代码：

<div class="tab-itme">
    <ul @click="clickit()">
       <li><router-link active="#/index" to="index">首页</router-link></li>
       <li><router-link active="#/item" to="item">项目列表</router-link></li>
       <li><router-link active="#/myloan" to="myloan">我要借款</router-link></li>
       <li><router-link active="#/Safety" to="Safety">安全保障</router-link></li>
       <li><router-link active="#/about" to="about">关于我们</router-link></li>
       <li><router-link active="#/Account" to="Account">我的账户</router-link></li>
    </ul>
</div>

javascript代码：

<script>
  export default {
    data() {
      return {
        win:''
      }
    },
    mounted:function(){
      this.win = window.location.hash.split('/')[1] 
    },
    methods:{
      clickit(){
        this.win = window.location.hash.split('/')[1] 
      }
    },
    watch:{
      win:function(n){
          switch(n){
            case 'index' :
            document.querySelector('[active="#/index"]').classList.add('active')
            break;
            case 'item':
            document.querySelector('[active="#/item"]').classList.add('active')
            break;
            case 'myloan':
            document.querySelector('[active="#/myloan"]').classList.add('active')
            break;
            case 'Safety':
            document.querySelector('[active="#/Safety"]').classList.add('active')
            break;
            case 'about':
            document.querySelector('[active="#/about"]').classList.add('active')
            break;
            case 'Account':
            document.querySelector('[active="#/Account"]').classList.add('active')
            break;
          }
      }
    }
  }
</script>

css样式（less）只供参考：

.active{
  border-bottom: 3px solid #D9BD76;
}
.tab-itme{
     display: inline-block;
     ul{
        padding: 0;
        margin:0;
        li{
          font-size: 18px;
          list-style: none;
          float: left;
          line-height: 80px;
          height: 80px;
          padding: 0 20px;
          a{
            color:#000;
            text-decoration: none;
            padding-bottom: 5px;
          }
        }
        li a:hover{
          border-bottom: 3px solid #D9BD76;
        }
      }
  
    }

 

 

router代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'
import index from '../components/index'
import about from '../components/about.vue'
import Account from '../components/Account.vue'
import item from '../components/item.vue'
import myloan from '../components/myloan.vue'
import Safety from '../components/Safety.vue'
Vue.use(Router)

export default new Router({
    routes:[
      {
          path:'/',
          name: Home,
          component:Home,
          redirect:'/index',
          children:[
          {
            path:'/index',
            name: index,
            component:index
          },{
            path:'/about',
            name: about,
            component:about
          },{
            path:'/Account',
            name: Account,
            component:Account
          },{
            path:'/item',
            name: item,
            component:item
          },{
            path:'/myloan',
            name: myloan,
            component:myloan
          },{
            path:'/Safety',
            name: Safety,
            component:Safety
          }
          ]
      }
    ]
})