vue：路由菜单刷新高亮

最新推荐文章于 2023-05-01 22:24:14 发布
最新推荐文章于 2023-05-01 22:24:14 发布
阅读量1.4k 收藏 3
点赞数 2
分类专栏： vue 文章标签： 菜单高亮 element菜单 路由跳转 动态路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013592575/article/details/103584069
版权

很多人遇到了路由高亮的问题。问为什么页面一刷新进来当前页就不不高。刷新的时候也没有记录状态。其实就是路由没有记录。。。

我们想要实现的效果是： 

1､这里用的是 Element UI 。先把菜单封装。请看上面的文章：https://blog.csdn.net/u013592575/article/details/103493865

2､element UI 中 NavMenu 有一个 default-activ=‘xxx’ 的这个属性。这里写上 this.$route.path 。就可以显示高亮了。

    会有多层嵌套路由，所以建议是放这建议是放在 computed (计算属性) 中。

    也可以直接绑定：：default-active='$route.path'。

    代码图：

 

帅帅哥的兜兜
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue相同路由跳转强制刷新该路由组件操作
10-14
主要介绍了vue相同路由跳转强制刷新该路由组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 路由导航动态设置当前菜单的高亮状态(多级)
qq_39704803的博客
10-26 755
<template> <div class="menu-container clearf"> <ul class="menu-list common-container" > <li class=" " v-for="(item,index) in navs" :key="index" @click="routerLink(index, item.path)"> <di.
antd menu一级/父级菜单高亮
qq_36384745的博客
09-15 1893
antd menu一级/父级菜单高亮，一级菜单层级高亮，antd menu高亮样式修改
ant-desgin-vue 点击时高亮显示
d_yk991的博客
07-22 1440
参考案例https://blog.csdn.net/gyueh/article/details/109119862 1.点击高亮主要用到ant-design-vue两个方法customRow，rowClassName <a-table style="overflow: hidden" class="tableStyle abc" id="tableStyle" :columns="columns"
Vue 页面刷新时菜单栏的高亮问题，默认路由
PrimaryColor
07-15 1305
data() { return { selectTag: "", //选择菜单 } } 在文件中的监听器如下： watch: { "$route.path": { handler(val) { console.log("菜单：", val); this.selectTag = val; //val是路由跳转的path }, immediate: true //立即执行 } },
element-ui导航菜单使用vue-router刷新后高亮显示不一致完美解决办法
weixin_42661283的博客
05-15 6113
问题1：刷新后，默认高亮显示为当前的第一个索引值 产生原因： :default-active="activeIndex" 解决办法：将:default-active="activeIndex" 替换成 :default-active="$route.path" 问题2：改完:default-active="$route.path"后发现高亮不显示，需要双击对...
vue通过路由实现页面刷新的方法
08-28
本篇文章主要介绍了vue通过路由实现页面刷新的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2 中二级路由高亮问题及配置方法
12-02
实现效果图 ...import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Game from '@/components/Game' import Bbs from '@/components/Bbs' import Me
Vue结合路由配置递归实现菜单栏功能
10-15
主要介绍了Vue结合路由配置递归实现菜单栏,本文通过实例代码给大家介绍的非常详细，对大家的学习火锅工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue动态路由:路由参数改变,视图不更新问题的解决
10-16
今天小编就为大家分享一篇vue动态路由:路由参数改变,视图不更新问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目实现设置根据路由高亮对应的菜单项操作
11-19
高亮显示菜单是很常见的一个场景 首先，在router-link标签上绑定对应的路径 然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单 也可以在router路由数组里面设置meta信息，然后根据这个信息来判断是否高亮（这里可以循环生成菜单，不过我没有写）只是说一下思路 这样即可根据路由实现对应的菜单高亮了，我个人认为第二种比较灵活，如果菜单嵌套很多可以用第二种 补充知识：vuecli项目怎样使用jsx 有时候用jsx写页面可能更灵活，当然在vue中写jsx需要插件的支持 我用了一些官方给出的，感觉不怎么好用，推荐安装这个 安装babel
vue-router meta（2）页面进入详情页面时，无子项导航栏时，该菜单未高亮。
sepgit的博客
12-10 653
原因 管理系统，左侧导航栏有个单级的菜单（无子一级的菜单），进入后页面显示的是具体的房间列表。点击具体的房间可以进入房间详情页面，展示具体的房间数据。这时页面路由发生变化。发现，导航栏中不存在高亮的选项。 进入导航栏页面 <el-menu ....//其他配置项 :default-active="$route.path" .... </el-menu> 上述列表项 <el-menu-item index="/roomIndex"> <span slo
解决点击按钮实现路由跳转后Element导航控件没有同步高亮的问题
louxinuo的博客
12-14 1214
不点击Element导航栏，而是通过点击组件内的某些按钮，实现页面的跳转。 路由跳转很简单，但我们的需求是如何实现导航控件的同步高亮！
解决Element-UI 侧边栏页面刷新或者首次登录后不高亮显示的问题
l2345432l的博客
03-23 693
项目输出this.$route可以在页面发现如下信息 当然因项目而异，但是 this.$route.path一般都是当前页面的路由地址，所以根据Element-UI里一个属性将default-active绑定为$route.path即可 如下代码 <el-menu :default-active="$route.path" background-color="#283643" text-color="#fff" active-text-color="#1CC09F"
element UI中使用导航栏配置router后无法高亮
l1002670137的博客
09-19 544
解决组件库侧栏配置router后点击没有高亮显示的问题
解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失
qq_65388624的博客
08-23 2010
解决Vue导航栏路由跳转，刷新后导航块高亮消失
element-ui中的NavMenu导航组件路由切换时仅地址栏路由改变而 ＜ router-view＞中的内容及导航栏选中不高亮的问题（已解决）
qq_46070495的博客
05-01 447
element-ui中的NavMenu导航组件路由切换时组件一直处于挂载状态。
vue切换菜单时不需要页面刷新_vue element-ui 刷新页面后导航菜单不高亮问题
weixin_39783915的博客
12-19 1204
问题详情：在使用element-ui的NavMenu组件作为导航菜单的时候，我是通过遍历router/index.js里的路由json数组(已定义成常量)来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。尝试解决：初步Google搜索之后发现原来NavMenu组件有这么一个参数配置用来管理当前激活的菜单：default-active 说明：当前激活菜单的 i...
element ui+vue 导航菜单开启router刷新不高亮问题解决
kbdmy的博客
06-22 1813
刷新页面后选中导航高亮不显示 最大原因:所选中的路径与当前激活路径不一致 如图可以打印当前选中路径 解决办法：使用饿了么 default-active属性 把值换成 $route.path 如下图: 不了解的同学可以点饿了么中文官网链接自行查询 因为我接收的二级导航后台数据path中不带’/'所以我自己拼接一个 当然也要注意第一个红色区域绑定的index值为字符串形式切是唯一的值 本人小白 如有错误请指正 谢谢大家 ...
vue3 路由跳转 导航高亮
最新发布
08-19
在 Vue 3 中，可以使用 Vue Router 进行路由跳转和导航高亮。下面是一个简单的示例： 1. 首先，确保已经安装了 Vue Router。你可以使用以下命令进行安装： ``` npm install vue-router@next ``` 2. 在你的应用程序的入口文件（通常是 `main.js` 或 `main.ts`）中，导入 Vue Router 并创建一个实例： ```javascript import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import App from './App.vue' const router = createRouter({ history: createWebHistory(), routes: [ // 定义你的路由 // { path: '/home', component: Home } ] }) const app = createApp(App) app.use(router) app.mount('#app') ``` 3. 在你的模板中，使用 `<router-link>` 组件来生成导航链接。该组件会自动根据当前路由状态添加一个 `router-link-active` 类，你可以使用该类来设置导航高亮样式。 ```html <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> ``` 4. 如果你需要在导航链接被点击时进行一些操作，可以使用路由守卫。例如，你可以在导航链接被激活时添加一个自定义类： ```javascript router.beforeEach((to, from, next) => { // 在每次导航前执行操作 const activeLink = document.querySelector('.router-link-active') if (activeLink) { activeLink.classList.remove('router-link-active') } next() }) ``` 这样，当用户点击导航链接时，当前链接会自动添加 `router-link-active` 类，并在下次导航前移除。 请注意，以上只是一个简单的示例，你需要根据你的具体需求进行调整。如果你想了解更多关于 Vue Router 的用法和配置，请查阅官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值