一、创建路由
import VueRouter from 'vue-router'
import Vue from 'vue'
// 1.安装插件
Vue.use(VueRouter)
const routes = [
]
// 2.创建路由
const router = new VueRouter({
routes
})
export default router
二、配置组件
创建一个
views
文件夹, 用来存放组件.
然后针对每个功能创建一个文件夹
每个文件夹里面只存放各自的功能, 公共的部分放在
components
里面
三、让使用者传递path
TabBarItem.vue
<template>
<div class="tab-bar-item" @click="textCilck">
<slot v-if="isActive" name="item-icon"></slot>
<slot v-else name="item-icon-active"></slot>
<div :class="{active: !isActive}"><slot name="item-text"></slot></div>
</div>
</template>
<script>
export default {
name: 'TabBarItem',
props: {
path: String,
},
data() {
return {
// isActive: isActived
}
},
methods: {
textCilck() {
this.$router.push(this.path)
}
},
computed: {
isActive() {
// 判断当前活跃的path是否和传递过来的path相同
return this.$route.path.indexOf(this.path) == -1
}
}
}
</script>
<style>
.tab-bar-item {
flex: 1;
text-align: center;
height: 49px;
font-size: 14px;
}
.tab-bar-item img {
height: 24px;
width: 24px;
}
.active {
color: red;
}
</style>
四、动态决定点击后的颜色
<template>
<div class="tab-bar-item" @click="textCilck">
<slot v-if="!isActive" name="item-icon"></slot>
<slot v-else name="item-icon-active"></slot>
<!-- 动态绑定style -->
<div :style="activeStyle"><slot name="item-text"></slot></div>
</div>
</template>
<script>
export default {
name: 'TabBarItem',
props: {
// 从父元素里面接收一个path
path: String,
// 从父元素里面接受一个color
activeColor: {
type: String,
default: 'red'
}
},
data() {
return {
// isActive: isActived
}
},
methods: {
textCilck() {
this.$router.push(this.path)
}
},
computed: {
isActive() {
// 判断当前活跃的path是否和传递过来的path相同
return this.$route.path.indexOf(this.path) !== -1
},
// 动态绑定style
activeStyle() {
return this.isActive ? {color: this.activeColor} : {}
}
}
}
</script>
<style>
.tab-bar-item {
flex: 1;
text-align: center;
height: 49px;
font-size: 14px;
}
.tab-bar-item img {
height: 24px;
width: 24px;
}
</style>
五、路径别名
webpack
里面配置了一个路径别名 : 即src
可以用@
表示