(笔记)vue通过当前路由来判断活动的菜单，刷新不失效

最新推荐文章于 2024-04-04 15:15:55 发布
最新推荐文章于 2024-04-04 15:15:55 发布
阅读量477 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zongmaomx/article/details/107184983
版权

效果： 当前选中的菜单背景色改为深色，通过路径来判断

 

在data中给imgs数组的对象添加link属性和对应的值

在style中设置当前活动菜单的背景色

在绑定class时通过判断当前路径中是否含有link来添加nownav class

 

zongmaomx
关注
vue路由学习笔记
m0_48895748的博客
12-13 449
路由学习笔记整理
vue2-vue-router(路由)学习笔记
xzl2233的博客
09-27 293
<!-- 向to属性传递路由信息对象 RouterLink会根据你传递的信息以及路由配置生成对应的路径 --> <RouterLink :to="{ name:'foo' }">go to foo</RouterLink> 在我们使用vue开发一个单页面的项目时，我们总会思考三个问题 如何根据地址中的路径选择不同的组件？ 把选择的组件放到哪个位置？ 如何无刷新的切换组件？ 而这三个问题恰恰用vue2里面的vue-router插件可以..
vue获取当前页面的路由，判断是否为指定页面
xuelong的博客
12-25 1048
项目中有时需要判断当前是否某个页面，只有指定页面执行该方法，其他界面不执行。
vue点击导航菜单，展示选中样式，菜单路由存在嵌套路由时也可以判断为当前路由
AKindofo的博客
06-02 553
【代码】vue点击导航菜单，展示选中样式，菜单路由存在嵌套路由时也可以判断为当前路由。
025通过Vue3的路由参数自动获取菜单项目的解决方案
阿赛
11-07 471
【代码】025通过Vue3的路由参数自动获取菜单项目的解决方案。
vue获取当前激活路由
chiuwingyan的博客
01-20 8906
一个 route object（路由信息对象） 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。 route object 是 immutable（不可变） 的，每次成功的导航后都会产生一个新的对象。 route object 出现在多个地方: 在组件内，即 this.$route 在 $ro
vue的动态路由，防止addRoutes无限添加，以及F5刷新不消失，第一次加载不消失
beichen3997的博客
03-04 4062
一 login.vue // 用户登录 handleLogin(nameForm) { this.$refs[nameForm].validate(valid =&gt; { // 数据传递的规则验证 if (valid) { let smt= dataRoutes; // const _this=...
Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
希望每天都能进步一点点
06-25 2644
Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
Vue基础笔记 路由
dengsiyao的博客
12-20 138
1.路由 路由：路径和组件的映射关系 目标：实现单页面应用（SPA） 单页面应用：所有功能在一个HTML页面上实现 前端路由作用：实现业务场景切换 优点：整体不刷新页面，用户体验更好。数据传递容易，开发效率高 缺点：首次加载会比较慢 使用路由： 下载路由。yarn add vue-router 在main.js中引入VueRouter函数 使用 Vue.use 将构造函数 VueRouter 加载到 Vue 上。这一步 VueRouter 注册了 两个全局组件 RouterLink 和 RouterVi
小白零基础学 VUE笔记
baidu_36820987的博客
12-29 965
面试题：react、vue中的key有什么作用？（key的内部原理）1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
使用路由元信息判断显示或隐藏
xx820702的博客
05-12 582
App.vue <template> <div> <common-header v-show="$route.meta.show"/> <div id="app"> <router-view></router-view> </div> </div> </template> <script> import CommonHeader from "@/componen
千万级项目后台菜单导航设计及react antd实现
蜗牛365
11-28 2084
后台管理系统一般通过菜单进行各个功能点的导航，在面临大量菜单时需要考虑如何设计使客户体验更加便捷。作者在最近几个百万级、千万级项目的开发实施过程中，用户对菜单导航结构提出一些修改意见，经过若干次迭代以优化操作体验，作者将迭代过程总结下做个分享。 整体布局 第一阶段 传统树形菜单导航，根据项目的不同，有的采用横向排列，有的固定在左侧 顶部菜单：从上到下分别为：标题栏、菜单栏、工作区 侧边菜单：导航菜单占据整个左侧，右边从上而下为标题栏、工作区 侧边菜单有个变形，标题栏占据全部，下边左右分别为导航菜单、工作
关于vue 路由的使用，以及点击左边菜单，显示对应的内容
大辉
03-27 1626
第一次使用路由，总有意想不到错误和突发情况，今天就说说初次使用vue路由的情况 路由安装， 这个你可以在安装vue项目时选择，这个 我就不用多说了，还有一种是通过npm下载 npm install vue-router --save 下载成功后，你的项目会出现这个文件 点击index.js进入开始配置你的路由 ![在这里插入图片描述](https://img-blog.csdnimg.cn/202103271940446.png?x-oss-process=image/watermark,type_Zm
判断当前路由，指定组件显示与否
qq_39704803的博客
10-26 1008
查看当前路由 {{this.$route.path}} 判断如果不是首页，则显示面包屑 <div class="breadcrumb-container" v-if="this.$route.path != '/home'"> <el-breadcrumb class="common-container" separator="/"> <el-breadcrumb-item :to="{ path: '/' }"&gt..
vue路由声明式导航：router-link详解（4）
rbgg_mp的博客
11-17 588
声明式导航 原生的方法:window.onhashchange 监听路径的切换 vue提供的组件:router-link 官方解释: 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 a 标签， 可以通过配置 tag 属性生成别的标签.。 另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名 router-link小栗子 1.在components下面新建一个Tabbar组件 <template> &l
router-link标签的选中激活导航router-link-active
斗师——Ace
02-27 7781
添加小程序，兑换各种视频教程/数据资源。 router-link: 其中tag='div'表示router-link为div标签 <template v-for="(item,index) in arr" v-if="arr.length>0"> <router-link tag="div" class="tab_item fle...
Vue基础知识：声明式导航---导航链接router-link，router-link是什么，怎么用？router-link-active和router-link-exact-active的区别
最新发布
我就知道你会来，我们一起进步吧！
04-04 637
to="/find" 可以许多路由,比如：/find /find/home /find/foods .....以/find开头都会添加。vue-router提供的一个全局组件，router-link(用于取代a标签)1.router-link-active 模糊匹配（应用比较多）2.router-link-exact-active 精准匹配。router-link-exact-active 精准匹配。router-link-active 模糊匹配。
vue中router-link配合router-view实现页面切换控制滚动条位置变化-案例
JackieDYH的博客
01-22 1368
页面切换不改变浏览器滚动条位置 路由表配置router { path: "/introduce", name: "introduce", meta: { title: "路由滚动条" }, component: () => import("../views/introduce.vue"), children: [ { path: '/introduce/property', meta: { .
vue3+element plus, el-menu导航选中后刷新页面保持当前选中状态
weixin_50161578的博客
09-21 1549
在el-menu的default-active中设置，
Vue项目中路由id改变页面不刷新的解决办法
"本文主要探讨了在Vue.js项目开发中遇到的一个常见问题——路由ID变更后页面内容未能随之刷新的问题，以及如何通过深入理解和利用Vue的特性来解决这个问题。" 在Web应用开发中，路由是控制页面跳转和管理状态的关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值