VUE实现底部导航栏

要实现底部导航栏，可以使用Vue的路由和组件来完成。

首先，在App.vue中定义底部导航栏的布局：

<template>
  <div id="app">
    <router-view/>
    <div class="bottom-nav">
      <router-link to="/home">首页</router-link>
      <router-link to="/category">分类</router-link>
      <router-link to="/cart">购物车</router-link>
      <router-link to="/mine">我的</router-link>
    </div>
  </div>
</template>

其中，`router-view`用来渲染当前路由对应的组件，`router-link`用来实现路由跳转。

然后，在router/index.js中配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/Home'
import Category from '@/pages/Category'
import Cart from '@/pages/Cart'
import Mine from '@/pages/Mine'

Vue.use(Router)

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

其中，`redirect`用来设置默认路由。

最后，在各个页面组件中实现具体的功能即可。