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

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

一级路由下 进行页面的跳转后 相对应的一级路由仍进行样式的显示

问题描述

vue 路由跳转之后 会发现当前路由下没有样式 但我们为了视觉效果 这个样式必须要进行携带的

解决方法

1. 利用遍历 将4个路由进行遍历渲染
2. 利用动态路由 使其可以进行指定的样式切换
3. 此时 页面进行跳转的时候 样式还处于保留状态
4. 故 将此问题 进行解决
5. 代码 如下

结构
<template>
  <div id="app1">
    <div class="nav">
      <span
        v-for="item in link"
        :key="item.id"
        @click="click(item.id)"
        :class="activeclass == item.id ? 'isactive' : ''"
      >
        <router-link :to="item.path" tag="div"> {{ item.title }}</router-link>
      </span>
    </div>
    <transition enter-active-class="animated fadeInRight">
      <!--:duration(可选项) 进场、离场时间 :duration="{ enter:200,leave:3000}"-->
      <div class="view">
        <router-view />
      </div>
    </transition>
  </div>
</template>

数据

data() {
    return {
      activeclass: 1,
      link: [
        {
          id: 1,
          path: "/Model",
          title: "车型管理",
        },
        {
          id: 2,
          path: "/premium",
          title: "保费版本",
        },
        {
          id: 3,
          path: "/shop",
          title: "店铺管理",
        },
        {
          id: 4,
          path: "/mechanism",
          title: "机构管理",
        },
      ],
    };
  },

方法

click(val) {
      console.log(val);
      this.activeclass = val;
      localStorage.setItem("num", val);
    },

初始化更新前

created() {
    if (localStorage.getItem("num")) {
      this.activeclass = localStorage.getItem("num");
    } else {
      this.activeclass = this.activeclass;
    }
  },

解析

1. 可以看到 有点击事件和 本地存储
2. 点击事件是为了让类名进行动态的一个切换
3. 本地存储是为了 当页面进行刷新时 页面仍然还是当前页面 路由展示样式包括路径都是 当前路由
4. 初始化之前进行判断 如果不存在 对应的按钮值 则按照当前设定的值进行处理 如果有 则按照获取到的值进行处理
5. 此方法没有将本地存储的数据给清除掉 是一个问题
6. 此方法也不是唯一的方法 只是当前方法将 我遇到的问题给解决了

至此 当前问题得到了解决 但是还是有很多问题 和一些bug的 比较繁琐 推荐使用第二种方法

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