tabbar 路由绑定页面,tabbar路由跳转（重难点！！）

啥也别说，先 npm install vue-router --save ,安装好依赖

建立几个 视图的组件。

然后 在 router文件夹 下 的 index.js 里面配置 路由！！
如下图

import Vue from 'vue'
import Router from 'vue-router'

import Cart from "../views/cart/Cart";
import Profile from "../views/profile/Profile";
import Category from "../views/category/Category";
import Home from "../views/home/Home";

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/cart',
      component: Cart
    },
    {
      path: '/profile',
      component: Profile
    },
    {
      path: '/category',
      component: Category
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

将 mode 设置 为 history，就可以去掉 ‘#’ 了，然后 给 几个 tab-item 绑定一下 click事件！！！

下面是我的代码

<template>
  <div class="tab-bar-item">
<!--    <slot name="item-icon"></slot>-->
    <div :class="{redFont: isRed}" @click="itemClick">
      <slot name="item-text"></slot>
    </div>

  </div>
</template>

<script>
    export default {
        name: "TabBarItem",
        data() {
          return {
            isRed: false
          };
        },
       props:{
         path: String
       },
       methods:{
          changeColor(){
            // this.isRed = !this.isRed;
          },
         itemClick() {
            this.$router.push(this.path)
         }
       }
    }
</script>

<style scoped>

  .tab-bar-item{
    flex: 1;
    text-align: center;
    height: 49px;/* 一般都是49 ，ios ,android ,移动端*/
  }
  .redFont{
    color:red;
  }

</style>

在 父组件传递 path 参数，子组件 props 接收，如果这个 path 是变量，会随时改变的 话要 用 v-bind,常量的话 我直接写死。