关于tabbar的active切换问题

main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill';
import Vue from 'vue';
import App from './App';
import router from './router';
import fastclick from 'fastclick';

import 'assets/scss/index.scss';

fastclick.attach(document.body);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 render: h => h(App)
});

App.vue文件

<template>
 <div id="app" class="g-container">
     <div class="g-view-container">
       <router-view></router-view>
     </div>
     <div class="g-footer-container">
       <c-tabbar/>
     </div>
 </div>
</template>

<script>
 import CTabbar from  "components/tabbar";

 export default {
   name: 'App',
   components: {
     CTabbar  //同 "c-tabbar":CTabbar
   }

 };
</script>
router/index.js文件

import Vue from 'vue';
import Router from 'vue-router';
// import Home from 'pages/home';
// import Category from 'pages/category';
// import Cart from 'pages/cart';
// import Personal from 'pages/personal';
// import Search from 'pages/search';
// import Product from 'pages/product';

Vue.use(Router);

const routes = [
 {
   name: "home",
   path: "/home",
   component: () => import("pages/home"),
   children:[
     {
       name:"home-product",
       path:'product/:id',
       component: () => import("pages/product")
     }
   ]
 },
 {
   name: "category",
   path: "/category",
   component: () => import("pages/category")
 },
 {
   name:"cart",
   path:"/cart",
   component: () => import("pages/cart")
 },
 {
   name:"personal",
   path:"/personal",
   component: () => import("pages/personal")
 },
 {
   name: "search",
   path: "/search",
   component: () => import("pages/search")
 },
 {
   path:"*",
   redirect:"/home"
 }
];
export default new Router({
 routes
});
tabbar/index.vue文件

<template>
   <div class="g-tabbar">
       <router-link class="g-tabbar-item" to="/home">
         <i class="iconfont icon-shouye"></i>
         <span>首页</span>
       </router-link>
       <router-link class="g-tabbar-item" to="/category">
         <i class="iconfont icon-leimu"></i>
         <span>类目</span>
       </router-link>
       <router-link class="g-tabbar-item" to="/cart">
         <i class="iconfont icon-qicheqianlian-"></i>
         <span>购物车</span>
       </router-link>
       <router-link class="g-tabbar-item" to="/personal">
         <i class="iconfont icon-weibiaoti2"></i>
         <span>个人中心</span>
       </router-link>
   </div>
</template>

<script>
export default {
   name: 'CTabbar'
};
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";


.router-link-acitve {
   color:$link-active-color;
}

</style>
index.scss文件

@charset "UTF-8";

@import "reset";
@import "base";
@import "iconfont";

@import "container";
@import "tabbar";
_tabbar.scss文件

@import "mixins";

.g-tabbar {
 display: flex;
 width: 100%;
 height: $tabbar-height;
 background-color: #fff;

 &-item {
   flex-grow: 1;
   @include flex-center(column);

   .iconfont {
     margin-bottom: 4px;
     font-size: $icon-font-size;
   }
 }
}
_container.scss文件

@import "mixins";

.g-container{
 position:relative;
 width:100%;
 max-width:640px;
 min-width:320px;
 height:100%;
 margin:0 auto;
 overflow:hidden;
}

.g-view-container{
 height:100%;
 padding-bottom:$tabbar-height;
}
.g-header-container{
 position:absolute;
 left:0;
 bottom:0;
 z-index:$navbar-height;
 width:100%;
}
.g-footer-container{
 position:absolute;
 left:0;
 bottom:0;
 z-index:$tabbar-z-index;
 width:100%;
 box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6);//hsla 饱和度色调;
}

.g-backtop-container{
 position:absolute;
 z-index:$backtop-z-index;
 right:10px;
 bottom:$tabbar-height + 10px;

}
_base文件

@import "mixins";

body, button, input, select, textarea {
 color: #5d656b;
 font-size: $font-size-base;
 font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
 line-height: 1;
}
body {
 background-color: #eee;
}
a {
 color: #686868;
 text-decoration: none;

 &:active {
   color: $link-active-color;
 }
}

html, body {
 overflow: hidden;
 width: 100%;
 height: 100%;
}