vue vue-cli vue-router编写一个底部导航

使用vue-router编写一个底部导航
以前写了一个有点bug，好像是说刷新页面后路由会回到主页的那个路由还是啥的，使主页路由高亮，因为我没碰到过，但是嘞，我还是改了一下下，这次绝对没有bug

路由的代码就用图片贴出来好了，毕竟我懒

html

<template>
  <div class="RouterBottom">
    <router-link v-for="(item,index) in RouterList" :key="index"  :to="item.pagePath" class="RouterSelect" exact>
      <img :src="item.pagePath === $route.path ? item.selectedIconPath : item.iconPath " alt />
      <span>{{item.text}}</span>
    </router-link>
  </div>
</template>

js

RouterList: [
        {
          iconPath: require('@/assets/RouterImage/TagIcon-1Hover@2xs.png'),
          selectedIconPath: require('@/assets/RouterImage/TagIcon-1Hover@2x.png'),
          text: '附近',
          pagePath: '/NearbyHome'
        },
        {
          iconPath: require('@/assets/RouterImage/tagbar-icong.png'),
          selectedIconPath: require('@/assets/RouterImage/tagbar-iconhoverg.png'),
          text: '圈子',
          pagePath: '/CircleHome'
        },
        {
          iconPath: require('@/assets/RouterImage/tagbar-icon.png'),
          selectedIconPath: require('@/assets/RouterImage/tagbar-iconhover.png'),
          text: '店铺',
          pagePath: '/'
        },
        {
          iconPath: require('@/assets/RouterImage/TagIcon-4@2x.png'),
          selectedIconPath: require('@/assets/RouterImage/TagIcon-4-Hover@2x.png'),
          text: '优惠券',
          pagePath: '/CouponHome'
        },
        {
          iconPath: require('@/assets/RouterImage/tagbar-iconm.png'),
          selectedIconPath: require('@/assets/RouterImage/tagbar-iconhoverm.png'),
          text: '我的',
          pagePath: '/MyHome'
        }
      ]

写过小程序的一看就知道我数组里面的命名都是从小程序那边抄过来的，毕竟自己想名字实在是太烧脑了，不过我还是稍微解释一下
iconPath: 这个是默认图片，也就是未选中的图片
selectedIconPath：这个选中的图片
text：这就是文字了
pagePath：这个就是跳转的页面

css

.RouterBottom {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  padding-bottom: env(safe-area-inset-bottom);
}
.RouterSelect {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.RouterSelect img {
  width: 0.5rem;
  height: 0.5rem;
}
.RouterSelect span {
  color: #c1c1c1;
  font-size: 0.2rem;
  font-family: "SourceHanSansCN-Regular, SourceHanSansCN";
  font-weight: 400;
}
.router-link-active {
  text-decoration: none;
}
a {
  outline: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.active span{
  color: #09C351;
  font-size: 0.2rem;
  font-family: "SourceHanSansCN-Regular, SourceHanSansCN";
  font-weight: 400;
}