啥也别说，先 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,常量的话 我直接写死。