设置vue默认路由的样式

可以使用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},
    ]
});