vue router底部导航栏功能

先上图，效果就是酱紫：

图片：QQ图片20180109112851.jpg

1、图标的获取进入阿里巴巴矢量图标库，网址  http://www.iconfont.cn。
点击官方图标库，选择天猫图标库，选中放入购物车。 添加至项目

图片：QQ图片20180109113352.png

此时会有查看在线链接和下载至本地两种方式，我选择第一种，因为后期如果要添加小图标的话，只需要重新生成在线链接，然后更新link即可

图片：QQ图片20180109113558.png

复制链接到index.html的link标签内，具体为

图片：QQ图片20180109113852.png

引入图标，使用<i class="icon iconfont icon-wo"></i>区别在第三个class来引入对应图标
此时所需图标处理完毕
2、创建导航、首页、分类、发现、我的导航组件Nav.vue、index.vue、Category.vue、Find.vue、Myindex.vue
Nav.vue
使用的样式时less，如果在.vue文件中写样式，style必须写成<style lang="less" type="text/less"></style>，否则会报错

<template>
  <div id="app">
    <div class="tabs">
      <ul>
        <router-link :to="{name:'index'}" tag="li" exact>
          <div>
            <i class="icon iconfont icon-huahui"></i>
          </div>
          <div>首页</div>
        </router-link>
        <router-link :to="{name:'Category'}" tag="li">
          <div>
            <i class="icon iconfont icon-fenlei"></i>
          </div>
          <div>分类</div>
        </router-link>
        <router-link :to="{name:''}" tag="li">
          <div>
            <i class="icon iconfont icon-faxian"></i>
          </div>
          <div>发现</div>
        </router-link>
        <router-link :to="{name:''}" tag="li">
          <div>
            <i class="icon iconfont icon-gr2"></i>
          </div>
          <div>我的</div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {}
</script>

<style lang="less" type="text/less">
  .tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 10;
    box-shadow: 0 2px 4px #000;
    width: 100%;
  & > ul, & > ul > li {
                margin: 0;
                padding: 0;
              }
  ul {
    display: table;
    width: 100%;
  & > li {
        text-align: center;
        font-size: 16px;
        display: table-cell;
        padding: 8px 12px;
        cursor: pointer;
  &.router-link-active{
     color: #D0021B;
   }
  & > div {
        font-size: 14 px;
  & > i {
        font-size: 30px;
      }
  }
  }
  }
  }
</style>



App.vue引入组件Nav.vue，并添加<router-view>渲染路径匹配到的视图组件

图片：QQ图片20180109123433.png

3、创建路由     router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Category from '@/components/Category'
import Details from '@/components/Details'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/Category',
      name: 'Category',
      component: Category
    },
    {
      path: '/Details',
      name: 'Details',
      component: Details
    }
  ]
})