组件index.vue

<template>
    <div class="g-tabbar">
        <router-link class="g-tabbar-item" to="/home">
            <i class="iconfont iconhome"></i>
            <span>首页</span>
        </router-link>
        <router-link class="g-tabbar-item" to="/category">
            <i class="iconfont iconfenlei"></i>
            <span>分类页</span>
        </router-link>
        <router-link class="g-tabbar-item" to="/cart">
            <i class="iconfont iconxinxi"></i>
            <span>购物车</span>
        </router-link>
        <router-link class="g-tabbar-item" to="/personal">
            <i class="iconfont iconwode"></i>
            <span>个人中心</span>
        </router-link>
    </div>
</template>

<script>
export default {
    name:"Tabbar"
}
</script>

<style lang="scss" scoped>
    .g-tabbar{
        display:flex;
        width:100%;
        height:50px;
        background:#fff;

        &-item{
            flex:1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color:#333;
            font-size:12px;

            .iconfont{
                margin-bottom:4px;
                font-size:30px;
            }
        }

    }
    a{
        text-decoration: none;
    }
    .router-link-active{
        color:red;
    }
</style>

组件app.vue

<template>
      <div id="app" class="container">
    
        <div class="header-container">
          头部导航
        </div>
        <div class="view-container">
          <div class="content">
            <router-view></router-view>
          </div>
          
        </div>
        <div class="footer-container">
          <Tabbar></Tabbar>
        </div>
      </div>
    </template>
    
    <script>
    import Tabbar from "./components/tabbar/index"
      export default {
        name: 'App',
        components:{Tabbar}
      }
    </script>
    
    <style>
    *{
        margin:0;
        padding:0;
    }
    html,body,#app{
        /* 必须设置，否则内容滚动效果无法实现 */
        width:100%;
        height:100%;
    }
      .container{
        position: relative;
        width:100%;
        height:100%;
        max-width:640px;
        min-width:320px;
        overflow:hidden;  
      }
      .header-container{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        z-index:999;
        height:64px;
        background:pink; 
      }
      .view-container{
        padding-top: 64px;
        height:100%;
        padding-bottom:50px;
        background:lightblue;
        overflow:auto;
      }
      .content{
        height:100%;
      }
      .footer-container{
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        max-width:640px;
        box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6);
        height:50px;
        z-index:999;
        background:lightgreen;
      }
    </style>

路由index.js

import Vue from 'vue'
import Router from 'vue-router'
const Home = ()=>import("@/components/tabbar/Home.vue")
const Category = ()=>import("@/components/tabbar/Category.vue")
const Cart = ()=>import("@/components/tabbar/Cart.vue")
const Personal = ()=>import("@/components/tabbar/Personal.vue")

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/category',
      name: 'category',
      component: Category
    },
    {
      path: '/cart',
      name: 'cart',
      component: Cart
    },
    {
      path: '/personal',
      name: 'personal',
      component: Personal
    },
    {
      path:"/",
      redirect:"/home"
      
    }
  ]
})