需求：

点击按钮实现页面跳转&&触发浏览器的回到上一页/下一页，页面和按钮效果实时变化。

方法：

监听路由变化，vue3监听路由变化不再使用watch，而是onBeforeRouteUpdate。

image.png

html:

  <div class="tabber">
    <div
      v-for="(item,index) in routerData"
      :key="index"
      class="tabber-item"
      @click="changePage(item.route)"
    >
      <div class="icon" :class="routeName===item.route?'icon-active':''">
        <span class="iconfont" :class="item.icon" />
      </div>
      <text>{{ item.name }}</text>
    </div>
  </div>

script:

import { useRouter, onBeforeRouteUpdate } from 'vue-router';
const router = useRouter();
const routerData = ref([
  {
    name: '现状资源',
    route: 'resource',
    icon: 'icon-xianzhuangziyuan',
  },
  {
    name: '规划管控',
    route: 'control',
    icon: 'icon-guihuaguankong',
  },
  {
    name: '全览',
    route: 'home',
    icon: 'icon-zonglan',
  },
  {
    name: '村寨管理',
    route: 'administrator',
    icon: 'icon-cuizhai',
  },
  {
    name: '执法监督',
    route: 'supervise',
    icon: 'icon-zhifajiandu',
  },
]);
const routeName = ref(sessionStorage.getItem('routeName') || 'home');
const changePage = (route) => {
  sessionStorage.setItem('routeName', route);
  router.push(`/${sessionStorage.getItem('routeName')}`);
};

style:

.tabber{
  width: 54%;
  height: 80px;
  @include flexRowCenter;
  position: fixed;
  bottom: 0;
  left: 23%;
  font-size: 1rem;
  color: #FFFFFF;
  @extend .font4;
  font-style: italic;
  background-image: url("../../public/static/img/fix-bg.png");
  background-repeat: no-repeat;
  background-size:100% 100%;
  z-index:999;

  .tabber-item{
    margin-right: 54px;
    margin-top: -54px;
    position: relative;
    @include flexColCenter;
    .icon{
      width: 56px;
      height: 56px;
      cursor: pointer;
      @include flexRowCenter;
      border: 1px solid #FFFFFF;
      border-radius: 50%;
      box-shadow: 4px 6px 17px 0px rgba(198,233,253,0.61) inset, 3px 12px 50px 0px rgba(121,248,243,0.26) inset;
      transition: all .5s;

      .iconfont{
        color: #FFFFFF;
        font-size: 28px;
      }
    }
    .icon-active,
    .icon:hover
    {
      position: relative;
      top: -5px;
      background: rgba(0, 184, 175, 0);
      border: 4px solid #95E4FF;
      box-shadow: 4px 6px 10px 0px rgba(92, 254, 255, 0.83) inset, 4px 15px 50px 0px rgba(92, 188, 255, 0.71) inset;
    }
    &:first-child,
    &:last-child
    {
      top: 14px;
    }
    &:nth-child(2),
    &:nth-child(4)
    {
      top: 7px;
    }
    &:nth-child(3){
      .icon {

      }
    }
  }

}