Vue学习笔记：路由开发 Part 03

在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跳转动作。