在Part 1中提到了router-link。本文档使用一个标签栏来演示其功能
在之前的例子中引入一个新的组件TabBar
tabbar.vue
<template>
<div class="tabbar">
<ul>
<li><router-link to="/center" active-class="tabbar-active"> Center </router-link></li>
<li><router-link to="/film" active-class="tabbar-active"> Film </router-link></li>
<li><router-link to="/cinema" active-class="tabbar-active"> Cinema </router-link></li>
</ul>
</div>
</template>
<style scoped>
.tabbar {
position: fixed;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
bottom: 0;
}
.tabbar ul {
display: flex;
list-style: None;
}
.tabbar ul li {
flex: 1;
}
.tabbar-active {
color: red;
}
</style>在这个组件中使用router-link引入三个链接，使用active-class标注选中生效状态下的css类。
这是一种写法，还可以利用slot方式进行编写，上述可以改写为以下形式：
<template>
<div class="tabbar">
<!-- <ul>
<li><router-link to="/center" active-class="tabbar-active"> Center </router-link></li>
<li><router-link to="/film" active-class="tabbar-active"> Film </router-link></li>
<li><router-link to="/cinema" active-class="tabbar-active"> Cinema </router-link></li>
</ul> -->
<ul>
<router-link custom to="/center" v-slot="{isActive, navigate}">
<li :class="isActive?'tabbar-active':''" @click="navigate">Center</li>
</router-link>
<router-link custom to="/film" v-slot="{isActive, navigate}">
<li :class="isActive?'tabbar-active':''" @click="navigate">Film</li>
</router-link>
<router-link custom to="/cinema" v-slot="{isActive, navigate}">
<li :class="isActive?'tabbar-active':''" @click="navigate">Cinema</li>
</router-link>
</ul>
</div>
</template>
<style scoped>
.tabbar {
position: fixed;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
bottom: 0;
}
.tabbar ul {
display: flex;
list-style: None;
}
.tabbar ul li {
flex: 1;
}
.tabbar-active {
color: red;
}
</style>添加了custom 与v-slot。v-slot中指定了isActive 激活类 navigate跳转动作。
