你写的太复杂了，这个完全可以在配置路由的时候写一个linkActiveClass搞定的，建议去看看vue-router的文档
配置可以写在main.js定义路由里面
const router = new VueRouter({

linkActiveClass: "active",    //设置点击状态的class
mode: 'hash',
hashbang:true,
routes:routerConfig

})

然后在你的.vue样式里加上.active{color: #41B883;}的样式就行了

router-link写成这样<router-link to="/" class="item">首页</router-link>

换成@click.native应该就行了，当然楼上的方法更好

将click事件换成@click.native="select('a')"；
写这种导航时，我通常是用这样的方法，v-for
<ul>

       <li v-for="(item,index) in liData" :class="    {active:$route.matched[0].path==item.label}" ><router-link :to="item.label">{{item.name}}</router-link></li>

</ul>
data(){

return {

  liData:[
    {name:"首页",label:"/home"},
    {name:"设计器",label:"/designer"},
    {name:"任务管理",label:"/taskmanger"},
    {name:"节点管理",label:"/node"}
  ]
  },
这里的active的变化就是根据地址栏中变化而变化，这样前进后退都不会有问题

    <router-link :to="item.url" active-class="act-bar" tag="li" exact>
     
    </router-link>

你可以定义选定后的样式 .act-bar{}

<p class="footer-box">
   <router-link to="/">
      首页
   </router-link>
</p>

.router-link-active{
    color: #41B883;
}

直接这样就行了在.router-link-active设置的颜色，就是你当前点击的router-link那一块，激活后的样式颜色，也可以设置其他样式，然后其他的router-link，会恢复默认的样式