vue+el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面)

本文介绍了如何在Vue项目中使用el-menu组件保持菜单项的激活状态,即使页面刷新也能保持。同时,文章提供了实现页面路由局部刷新的方法,包括创建redirect.vue页面和设置点击事件。
摘要由CSDN通过智能技术生成

一、菜单项激活状态保持

有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢?

现在给出以下解决办法:
1489272-20190814201916490-681011042.png
即加上这样一段代码即可:

:default-active="this.$route.path"

二、实现页面的路由刷新(局部刷新)

想要实现路由的刷新,官方并没有给出解决办法,通过自己摸索和借鉴,得出了以下解决方法:

  1. 首先,新建一个空白页面redirect.vue,然后写入这样一段代码:

    <script>
    export default {
      beforeCreate() {
          console.log(this.$route)
          const nextPath = this.$route.query.nextPath
        this.$router.replace({ path: nextPath})
        console.log("调用")
        console.log(nextPath)
      },
      re
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值