vue点击路由刷新选中样式不变

我这里用的是vue路由进行配置的数据

以下是routes中index.js的内容

import VueRouter from 'vue-router';
import app from '../App'
//导入主页内容
import home from '../components/home.vue'
//导入基础内容
import basics from "../components/basics.vue";
const routes = [
    //配置路由
    {
        path: '/',
        component: app,
        mate: {
            title: '登录页面'
        },
        //默认子路由
        redirect: '/home',
        //子路由
        children: [
            {//配置主页内容
                path: 'home',
                name: 'home',
                component: home,
            },
            {//配置基础内容
                path: 'basics',
                name: 'basics',
                component: basics
            }
        ]
    },
];
const router = new VueRouter({
    mode: 'history',
    routes
})
export default router;

首页配置

<!-- 首页 -->
  <div>
        <!-- 点击的内容 -->
        <div>
          <ul>
           <!--点击后将路由传入（路由保证唯一）-->
            <router-link to="home"><li @click="changecolor('home')" :class="activeindex=='home' ? 'textcolor': ''">主页</li></router-link>
            <router-link to="basics"> <li  @click="changecolor('basics')" :class="activeindex=='basics' ? 'textcolor': ''">基础</li></router-link>
          </ul>
        </div>
        <!-- 点击出现的内容 -->
        <div>
          <router-view></router-view>
        </div>
  </div>

js中

  export default {
    name: 'HelloWorld',
    data(){
      return{
        activeindex:'',
      }
    },
    mounted(){//利用函数钩子获取路由的name，赋值给样式，这样可以避免刷新路由样式改变的问题
      this.activeindex=(this.$route.name);
    },
    methods: {//点击后将值传入进行改变样式
      changecolor:function(index){
        this.activeindex=index;
      }
    },
  }

css样式

.textcolor{
    color: #fc5531 !important;
  }

大概思路是这样，希望有帮助