可以使用router-link-active设置路由选中时的样式,但是当我们在设置默认路由时,会出现第一个显示第一个路由对应的视图,但是第一个路由没有呈现选中的样式。
此时只要在配置默认路由时使用一下redirect路由重定向即可解决问题。
<template>
<div class="footer">
<router-link to="/home">
<i class="iconfont icon-home"></i>首页
</router-link>
<router-link to="/list">
<i class="iconfont icon-chazhaobiaodanliebiao"></i>列表
</router-link>
<router-link to="/collect">
<i class="iconfont icon-shoucang"></i>收藏
</router-link>
<router-link to="/add">
<i class="iconfont icon-tianjia-xue"></i>添加
</router-link>
</div>
</template>
<script>
export default {};
</script>
<style scoped lang="less">
*{
margin:0;
padding:0;
}
div{
width: 100%;
position: fixed;
bottom: 0;
left:0;
display: flex;
border-top:1px solid #ccc;
a {
text-align:center;
flex-grow: 1;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
font-size: 20px;
i{
font-size:20px;
}
&.router-link-active {
color: red;
}
}
}
</style>
路由配置如下:
import Vue from "vue";
import Router from "vue-router";
import Home from '../views/Home'
import List from '../views/List'
import Collect from '../views/Collect'
import Add from '../views/Add'
Vue.use(Router);
export default new Router({
routes:[
{path:"/",redirect:"/home"},//通过路由重定向解决默认显示路由的样式
{path:"/home",component:Home},
{path:"/list",component:List},
{path:"/collect",component:Collect},
{path:"/add",component:Add},
]
});