路由（router-view,router-link）实现底部导航栏

创建四个vue组件并index.js里注册

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Cate from '@/components/Cate'
import Rank from '@/components/Rank'
import Me from '@/components/Me'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/cate',
      name: 'cate',
      component: Cate
    },
    {
      path: '/rank',
      name: 'rank',
      component: Rank
    },
    {
      path: '/me',
      name: 'me',
      component: Me
    },
    {
      path:"/",
      redirect:"/home"
    }

  ]
})

再建个底部组件比如Index.vue把他引入到根组件里

<template>
  <div id="app">
    <router-view/>
    <Index></Index>
  </div>
</template>

<script>
import Index from "./components/Index"
export default {
  name: 'App',
  components:{Index}
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
ul li{
  list-style: none;
}
</style>

Index组件的内容如下

<template>
    <div class="index">
        <ul>
          <li 
            v-for="(item,index) in navPicArray"
            :key="index"
            @click="changeImg(index)"
          
            >
            <router-link :to="item.path" >
            <img  alt="" v-bind:src="item.icon" v-show="index!=num">
            <img  alt="" v-bind:src="item.active" v-show="index==num">
            <p>{{item.name}}</p>
            </router-link>
          </li>
        </ul>
    </div>
</template>
<script>

export default {
  name: "index",
  data() {
    return {
          num:0,
          navPicArray:[
          {
            icon:require('../../static/img/home.png'),
            active:require('../../static/img/home1.png'),
            path:"/home",
            name:"首页"
          },
          {
            icon:require('../../static/img/cate.png'),
            active:require('../../static/img/cate1.png'),
            path:"/cate",
            name:"分类"
          },
          {
            icon:require('../../static/img/rank.png'),
            active:require('../../static/img/rank1.png'),
            path:"/rank",
            name:"排行"
          },
          {
            icon:require('../../static/img/me.png'),
            active:require('../../static/img/me1.png'),
            path:"/me",
            name:"我的"
          }
        ],
    }
  },
  mounted(){

  },
  methods: {
    changeImg(index){
      console.log("index改变之前"+index)
     
     this.num=index
     console.log("index改变之后"+index)
  
    }
  }

};
</script>
<style scoped>
.index{
  width: 100%;
  height: 60px;
  background: blueviolet;
  position: fixed;
  bottom: 0;
}
.index ul{
  width: 100%;
  height: 60px;
  display: flex;
}
.index ul li{
  width: 25%;
  height: 60px;
  text-align: center;
  padding-top: 10px;
}
.index ul li img{
  width: 25px;
}
a{
  text-decoration: none;
}
.router-link-active{
  color: red;
}
</style>

配置rem后的样式

<style scoped lang="scss">
.index{
  width: 100%;
  height: 0.88rem;
  background: blueviolet;
  position: fixed;
  bottom: 0;
}
.index ul{
  width: 100%;
  height: 0.88rem;
  display: flex;
  li{
    width: 25%;
    height: 0.88rem;
        margin-top: 0.1rem;
    
    img{
        width: 0.4rem;
    }
    a{
        font-size: 0.3rem;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
  }
}
.router-link-active{
  color: red;
}
</style>