vue中的路由及自定义图标

效果如图所示：

安装vue-router：

npm install vue-router --save

底部选项卡：

使用的是：MUI中的 tab bar(选项卡)
下载mui:[mui](https://github.com/dcloudio/mui),将其中的dist文件夹放到项目中的static文件夹下

核心文件引入：

在main.js文件中引入：
// 引入路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 引入MUI样式
import './static/vendor/mui/dist/css/mui.css'

里面的知识点：

1、自定义底部按钮图标
2、选项卡切换时选中样式绑定

技术实现：

1、自定义图标：
   阿里巴巴矢量图：http://iconfont.cn
   选好合适的图标，添加入库，选择添加至项目（需要登陆），不要
   选择下载素材。选择Font class ,下载至本地。
   把文件夹中的iconfont.ttf文件拷贝到项目中的mui-dist-
   fonts文件夹下
   把iconfont.css中的
   /*自定义图标*/
    .icon-huiyuan:before { content: "\e715"; }
    .icon-gouwuche:before { content: "\e600"; }
    拷贝到项目中的mui-dist-css中的mui.css里
   使用的时候直接添加对应类名即可，例如：

//路由，:to表示去往哪个页面
<router-link class="mui-tab-item" :to="{name:'vip'}">
    <span class="mui-icon icon-huiyuan"></span>
    <span class="mui-tab-label">会员</span>
</router-link>

2、菜单切换样式绑定

// 创建对象并配置路由规则
let router = new VueRouter({
    //选中时通过添加类名添加样式
    linkActiveClass:'mui-active',
    routes:[
        {path:'/',redirect:{name:'home'}},
        {name:'home',path:'/home',component:Home},
        {name:'vip',path:'/vip',component:Vip}  
    ]
})