Vue.js底部导航三种写法

普通写法

vantUI 使用字体图标和文字

<template>
    <van-tabbar v-model="active" active-color="#07c160">
        <van-tabbar-item :to="{name:'home'}">
            <span>首页</span>
            <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icon.homeActive : icon.homeNormal"
            >
        </van-tabbar-item>
        <van-tabbar-item :to="{name:'money'}">
            <span>钱包</span>
            <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icon.moneyActive : icon.moneyNormal"
            >
        </van-tabbar-item>
        <van-tabbar-item :to="{name:'user'}">
            <span>个人中心</span>
            <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icon.userActive : icon.userNormal"
            >
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
export default {
    data() {
        return {
            active: 0,
            icon:{
                homeNormal: require('./home.png'),
                homeActive: require('./homeActive.png'),
                moneyNormal: require('./money.png'),
                moneyActive: require('./moneyActive.png'),
                userNormal: require('./user.png'),
                userActive: require('./userActive.png'),
            },
        }
    }
}
</script>

手写 适用于背景图等复杂样式

<template>
  <div class="footer">
    <div class="foot">
      <router-link
        v-for="(item,i) in footnavs"
        :key="i"
        :to="item.to"
        :class="{'selected':($route.meta.nav_index==item.nav_index)}"
      >
        <img :src="$route.meta.nav_index==item.nav_index?item.selected:item.no_selected" alt>
        <span v-show="!($route.meta.nav_index==item.nav_index)">{{item.name}}</span>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      footnavs: [
        {
          to: "/",
          name: "首页",
          no_selected: require("@img/home/shouye@2x.png"),
          selected: require("@img/home/shouye2@2x.png"),
          nav_index: 1
        },
        {
          to: "/money",
          name: "钱包",
          no_selected: require("@img/home/qianbao@2x.png"),
          selected: require("@img/home/qianbao2@2x.png"),
          nav_index: 2
        },
        {
          to: "/my",
          name: "个人中心",
          no_selected: require("@img/home/gerenhzongxin@2x.png"),
          selected: require("@img/home/gerenzhongxin@2x.png"),
          nav_index: 3
        }
      ]
    };
  }
};
</script>   
<style lang="less" scoped>
.footer {
  width: 100%;
  height: 98px;
  margin-top: 12px;
  .foot {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 16px 0px rgba(192, 192, 192, 0.4);

    a {
      width: 33%;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      img {
        width: 47px;
        height: 47px;
      }
      span {
        font-size: 28px;
        color: rgba(102, 102, 102, 1);
      }
      &.selected {
        img {
          width: 85px;
          height: 85px;
        }
      }
    }
  }
}
</style>

路由文件

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/pages/home/home'
import noticeList from '@/pages/home/noticeList'
import money from '@/pages/money/money'
import my from '@/pages/my/my'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'home',
            component: home,
            meta: {
                index: 0,
                hasFooter: true,
                nav_index: 1
            },
        },
        {
            path: '/money',
            name: 'money',
            component: money,
            meta: {
                index: 0,
                hasFooter: true,
                nav_index: 2
            },
        },
        {
            path: '/my',
            name: 'my',
            component: my,
            meta: {
                index: 0,
                hasFooter: true,
                nav_index: 3
            },
        },
        {
            path: '/noticeList',
            name: 'noticeList',
            component: noticeList,
            meta: {
                index: 1,
                hasBar: true,
            },
        },

    ],
    //该方法用于控制滚动行为，
    scrollBehavior(to, form, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return { x: 0, y: 0 }
        }
    }
})

app.vue文件

<template>
  <div id="app">
    <tabBar v-show="$route.meta.hasBar"/>
    <transition :name="transitionName">
      <router-view/>
    </transition>
    <Footer v-show="$route.meta.hasFooter"/>
  </div>
</template>

<script>
import "./common/css/common.css";
// bug:不能为小写footer会报错
import Footer from "@/components/footer";
import tabBar from "@/components/tabBar";
export default {
  name: "App",
  data() {
    return {
      transitionName: ""
    };
  },
  components: {
    Footer,
    tabBar
  },
  mounted() {},
  watch: {
    /*
     * 使用watch 监听$router的变化
     * 如果to索引大于from索引,判断为前进状态,反之则为后退状态
     * 设置动画名称
     */
    $route(to, from) {
      if (to.meta.index == from.meta.index) {
        this.transitionName = "";
      } else if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  }
};
</script>