vue自定义组件实现底部导航栏动态切换

我们都知道vue的两大特性：组件化和数据驱动，今天我们就来说说关于vue组件开发，最近由于开发一款移动端商城，底部的导航栏就利用组件化实现的，下面先看看效果图：

 实现这个功能我们需要知道父子组件之间的传值方式：

简单来说，子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。（具体案例可以看我之前写的博客https://blog.csdn.net/qq_37481512/article/details/89641922）。

下面我们来说说如何来实现这个功能：

一、新建首页、购物车、个人中心三个页面：

二、配置路由router文件夹下的index.js:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//首页
import member from '@/views/member/member'
import car from '@/views/car/car'
import my from '@/views/my/my'


const router = new Router({

  routes: [
    {
      path: '/member',
      name: 'member',
      component: member,
    },
    {
      path: '/',
      name: '首页',
      redirect: '/member',
      component: member,
    },
    {
      path: '/car',
      name: 'car',
      component: car,
    },
    {
      path: '/my',
      name: 'my',
      component: my,
    },
  ],
  mode: "history"//干掉地址栏里边的#号键
});

export default router

三、开始创建子组件࿰