路由切换之后默认高亮/刷新页面后导航栏路由与页面不一致问题终极方案

该博客介绍了如何利用sessionStorage解决路由切换时默认高亮的问题。通过将激活的路由值存储在sessionStorage中,并在页面创建时读取,确保默认主动态设置。涉及到的关键技术包括Vue的路由管理、事件绑定及数据同步。
摘要由CSDN通过智能技术生成

路由切换默认高亮

请注意,一定要保证你:default-active 路由的值 和你路由path的值相同

下面我列出方法,利用sessionStorage来解决这个问题

这是一些相关的值

:default-active="activePath"
activePath: "",

绑定点击对象

      <el-menu-item
        v-for="item in list"
        :key="item.id"
        :index="item.path"
        @click="getStore(item.path)"
      >

methods 和created中定义方法

  methods: {
    getStore(activePath) {
      window.sessionStorage.setItem('activePath',activePath)
      this.activePath = activePath
    },
  },
  created() {
        this.activePath = window.sessionStorage.getItem('activePath')
  },

问题解决

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值