热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

处理浏览器后退导航栏activemenu不变问题

问题是用户后退时候,左边导航栏显示的还是上一个页面的导航,但是路由和页面已经变了最开始的解决方案是每次路由跳转前把vuex里面的数据更改,然后对应到vue的active-path中

问题是用户后退时候,左边导航栏显示的还是上一个页面的导航,但是路由和页面已经变了

最开始的解决方案是每次路由跳转前把vuex里面的数据更改,然后对应到vue的active-path中

最后看了下另一个组的项目觉得解决方法很好,就记录一下,当前显示的菜单对应computed的route.path,如果路由配的没有 / 可以加上 replacce('/','') 把 / 去掉

class="el-menu-vertical-demo"
:router="true"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:unique-opened="true"
:default-active="activePathFn"
>


computed:{
  activePathFn(){
    return this.$route.path;
  }
},

 

 


推荐阅读
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • Vue 实战基础教程第9讲:深入理解计算属性与侦听器的高效使用
    Vue 实战基础教程第9讲:深入理解计算属性与侦听器的高效使用 ... [详细]
  • 在GitHub上克隆vue-element-admin项目时遇到依赖安装错误
    在 GitHub 上克隆 vue-element-admin 项目后,使用 `npm install` 安装依赖时遇到了未知的 Git 错误。具体错误信息为 `npm ERR! code 128`,提示命令执行失败。这可能是由于网络问题、Git 配置不正确或某些依赖包的仓库地址无效导致的。建议检查网络连接、更新 Git 版本并确保所有依赖项的 URL 正确无误。 ... [详细]
  • 在MySQL中更新密码时,首先需要在DOS窗口中切换到mysql安装目录,并使用`--skip-grant-tables`参数启动MySQL服务,以跳过权限表验证。接着,在MySQL命令行中执行相应的SQL语句来设置新密码。完成密码更新后,重启MySQL服务以使更改生效。此外,对于电脑快捷方式的修改,可以通过右键点击快捷方式,选择“属性”,在弹出的窗口中进行路径或目标的修改,最后点击“应用”和“确定”保存更改。 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • Vue 组件间通信:不依赖 Vuex 的解决方案与最佳实践 ... [详细]
  • 利用 Vue CLI 脚手架在 Visual Studio Code 中创建 Vue 项目
    本文介绍了如何在 Visual Studio Code 中使用 Vue CLI 脚手架创建 Vue 项目。首先,确保已安装 Node.js 和 npm,因为 Vue CLI 的安装依赖于 npm。可以通过在命令行中输入 `npm -v` 来检查 npm 是否已成功安装。接下来,我们将详细说明 Vue CLI 的安装步骤及其在 Visual Studio Code 中的应用。 ... [详细]
  • Vue项目上线后遇到的问题及解决方案 ... [详细]
  • 在 Vue 3 项目中使用 ElementPlus 的 Icon 组件时,遇到了 SVG 图标无法正常显示的问题。经过查阅官方文档和 GitHub 讨论,最终发现是由于图标路径配置不正确导致的。通过调整图标路径和引入方式,成功解决了这一问题,并确保了图标能够正确加载和显示。此外,还对项目依赖进行了更新,以兼容最新的 ElementPlus 版本。 ... [详细]
  • Vue 鼠标悬停触发的弹出窗口组件优化方案
    通过优化 Vue 鼠标悬停触发的弹出窗口组件,实现了在用户将鼠标悬停于目标元素上时,能够高效地展示所有参会人员的姓名信息。此方案不仅提升了用户体验,还确保了数据加载的性能和响应速度。 ... [详细]
  • 通过在 Vue Router 中使用 `beforeEach` 导航守卫,可以实现对未登录用户的自动重定向至登录页面的功能。具体实现方法是在导航守卫中检查目标路由的 `meta` 属性,如果该属性中的 `requireAuth` 值为 `true`,则进一步验证用户的登录状态。若用户未登录,则将其重定向到登录页面,确保系统的安全性和用户体验。此外,还可以结合 Vuex 状态管理来存储和验证用户的登录状态,提高代码的可维护性和扩展性。 ... [详细]
  • Vuex 实战进阶:构建高效笔记本应用(第二篇)
    在上一篇文章中,我们初步探讨了 Vuex 在该项目中的应用。本文将深入解析整个项目的架构设计。首先回顾 `main.js` 的内容,然后重点分析 `App.vue` 文件,其中引入了 `Toolbar.vue` 和 `NodeList.vue` 组件,详细说明它们在应用中的作用和交互方式。通过这些组件的协同工作,我们将展示如何构建一个高效且响应迅速的笔记本应用。 ... [详细]
  • 如何在 Vue 中使用 v-for 实现高效的数据遍历与渲染? ... [详细]
  • 深入解析 Vue 中通过 $route.params 实现参数传递的方法与技巧
    本文深入探讨了在 Vue 框架中利用 `$route.params` 进行参数传递的方法和技巧。通过详细解析 `$route.params` 的工作机制及其与 `$route.query` 的区别,帮助开发者更好地理解和应用这一功能。文章不仅涵盖了基本的使用方法,还提供了实际案例和最佳实践,以便读者能够灵活运用这些技术,提升开发效率和代码质量。 ... [详细]
  • Laravel 与 Vue 实现前后端分离时的跨域解决方案探析
    Laravel 与 Vue 实现前后端分离时的跨域解决方案探析 ... [详细]
author-avatar
莺妈
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有