路由跳转后 样式仍保留 方法二

小白上路 不喜勿喷哦 也希望大佬可以提出更多的意见

问题描述

1. vue 路由跳转之后 会发现当前路由下没有样式 但我们为了视觉效果 这个样式必须要进行携带的
2. 方法一 可以将问题解决 但却有些繁琐 而且还需要本地存储等来进行 辅助开发 使其不必要性放大了好几倍

故推出第二种方法

代码如下

初始数据
isActive: 1,
link = [
        {
          id: 1,
          path: "/Underwriting",
          title: "承保新建",
        },
        {
          id: 2,
          path: "/Todotasks",
          title: "承保待办",
        },
        {
          id: 3,
          path: "/new_claim_settlement",
          title: "理赔新建",
        },
        {
          id: 4,
          path: "/claim_settlement_todo",
          title: "理赔待办",
        },
        {
          id: 5,
          path: "/dataManagement",
          title: "数据管理",
        },
      ];

结构
<div class="header-right">
          <div
            v-for="item in link"
            :key="item.id"
            @click="click(item.id)"
            :class="{ active: isActive === item.id }"
          >
            {{ item.title }}
          </div>
          <a-icon type="logout" @click="showConfirm" /></div
      >

初始化页面完成后 生命周期
  mounted() {
    if (this.$route.query.item) {
      this.isActive = Number(this.$route.query.item);
    } else {
      this.isActive = 1;
    }
  },

方法
click(i) {
      console.log(i);
      this.isActive = i;
      if (i == 1) {
        this.$router.replace({
          path: "/Underwriting",
          query: {
            item: i,
          },
        });
      } else if (i == 2) {
        this.$router.replace({
          path: "/Todotasks",
          query: {
            item: i,
          },
        });
      } else if (i == 3) {
        this.$router.replace({
          path: "/new_claim_settlement",
          query: {
            item: i,
          },
        });
      } else if (i == 4) {
        this.$router.replace({
          path: "/claim_settlement_todo",
          query: {
            item: i,
          },
        });
      } else if (i == 5) {
        this.$router.replace({
          path: "/dataManagement",
          query: {
            item: i,
          },
        });
      }
    },

样式
active::before {
      content: "";
      display: block;
      position: absolute;
      width: 86px;
      height: 46px;
      color: #fff;
      border-bottom: 4px solid #40a9ff;
    }

所遇问题 及 解析

1. 为什么样式要用伪元素

   1. 答：因为使用伪元素且定位 可以使页面点击的时候不会出现那种 文字起伏的感觉 因为 绝对定位是不占位的

2. 为什么进行路由跳转的时候 要携带一个参数

   1. 答：因为跳转之后 当前参数没有进行保留的话 无法得到最基本的点击出现样式的效果

3. 为什么要用到mounted生命周期

   1. 答：因为我们是通过点击事件进行 样式的切换以及路由的跳转 虽然 刚进页面之后会重定向至指定的页面 但相对应的 按钮却没有样式 所以 我们使用此生命周期 来进行样式的显现

4. 通过当前link 数据 其实 方法中的一大堆判断可以节省很多 至于是否要优化 就看大家了

小白上路 不喜勿喷哦 也希望大佬可以提出更多的意见