vue中header 路由标签 高亮的技巧

最新推荐文章于 2023-11-07 16:45:36 发布
最新推荐文章于 2023-11-07 16:45:36 发布
阅读量223 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ourring/article/details/130552180
版权

vue 中 <router-link>标签被点击的时候，会有一个激活的类名。

分别是router-link-exact-active / router-link-active 

-router-link-exact-active 当页面路由路径与router-link的to属性完全一致时，添加的类名

-router-link-active 当页面路由路径包含to属性的路径时，添加的类名

在这里添加高亮样式既可达到效果

长笛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3路由高亮显示
m0_62487693的博客
03-07 322
router-link-active 被激活的路由才会添加router-link-active 模糊匹配的。>注意vue2.x支持 vue-router@3 vue3.x支持 vue-route@4。router-link-exact-active 精准匹配，只能匹配一个路由。- 1：安装 `npm install vue-router -D`- 3:将路由对象挂在到应用对象上 （main。- 2：编写路由实例对象代码。- 1：创建独立的文件。- 2: 初始化路由对象。- 2：编写路由配置。
Vue----路由高亮 & 命名路由
emmmm.....
04-30 2011
文章目录3.6 路由高亮3.6.1 默认的高亮 class 类3.6.2 自定义路由高亮的 class 类3.7 命名路由3.7.1 使用命名路由实现声明式导航3.7.2 使用命名路由实现编程式导航 3.6 路由高亮 Vue3 可以通过如下的两种方式，将激活的路由链接进行高亮显示： ① 使用默认的高亮 class 类 ② 自定义路由高亮的 class 类 3.6.1 默认的高亮 class 类 被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名
vue路由跳转，页面菜单中的代码高亮
m0_58861443的博客
08-13 177
代码高亮 在路由中，处于激活状态的路由，自动多两个class .is-active { background-color: $menuText !important; span{ color: $menuActiveText !important; } .svg-icon{ color: $menuActiveText !important; } } // $menuText 是定义的颜色 ...
Vue中导航切换后自动跳转导航下首个页面并进行高亮显示
2301_77886942的博客
11-01 536
在进行学习过程中注意到很多网站都会在进行头部导航时会自动的进行该导航下的首个页面的跳转并将该页面所在的导航展开，但是在我们使用的UI组件中并没有可以直接实现该功能的属性或方法于是我就对该功能进行了一个简单的实现。
vue路由跳转tabBar图片和文字的高亮效果
The_more_more的博客
05-16 958
vue路由跳转tabBar图片和文字的高亮效果 前言 在pc端和移动端的项目里面会遇见导航栏或者tabBar的点击跳转，图片和文字的高亮效果，对于小程序来说可以直接创建和修改图片和文字的高亮效果，也可以使用相应的组件库去自定义一些效果，而在pc端和移动端的来说需要对导航栏或者tabBar进行一定的封装，使其成为全局组件的使用，结合组件间的数据传递可以实现不同页面的不同信息的展示，本篇文章介绍路由跳转的时候，使图片和文字的高亮效果的方法 定义基本的组件 在demo的初期，我们需要在项目的components文
vue自定义标签和单页面多路由的实现代码
11-21
下面我们将深入探讨如何在 Vue 中实现自定义标签以及单页面多路由的配置。 ### 1. Vue 自定义组件标签 自定义组件标签是 Vue 的核心特性之一，它允许我们将独立的功能或视图封装成可重用的模块。例如，如果你有一...
vue实现路由切换改变title功能
10-16
在Vue.js开发中，尤其是构建单页应用(SPA)时，常常需要在路由切换时动态改变浏览器的`<title>`标签，以便更好地反映当前页面的内容。`vue-router`提供了导航守卫这一特性，使得我们能够方便地实现在路由变化时更新...
解决vue多个路由共用一个页面的问题
08-27
在 Vue 开发中，遇到多个路由需要共用一个页面的需求是非常普遍的，特别是当路由是通过动态添加的，不同的路由展示的东西只是数据不同其他没有变化。这篇文章将与您分享解决 Vue 多个路由共用一个页面的问题，具有很...
解决Vue 刷新页面导航显示高亮位置不对问题
11-28
在头部组件里面控制导航高亮显示是checked,默认值是0，触发点击事件会重新赋值，跳转路由，当刷新页面，checked值是0，所以要监听checked时刻发生变化；利用到vue的父子和子父传值；监听状态的变化 子页面将值传给父...
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
接下来，在需要进行局部刷新的路由中，我们调用一个方法，如`reloadRouter`，将目标路径作为参数传递： ```javascript methods: { reloadRouter(path) { this.$router.replace({ path: "/redirect", query: { ...
vue点击当前路由高亮小案例
10-16
主要为大家详细介绍了vue点击当前路由高亮小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3中路由跳转对应菜单高亮，在＜script setup＞中监听路由变化
小白菜的博客
04-13 791
vue3路由变化对应菜单高亮
vue 路由导航动态设置当前菜单的高亮状态(多级)
qq_39704803的博客
10-26 784
<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.
vue路由跳转，动态高亮显示问题 -- 亲测可用
qq_48113035的博客
04-12 1852
在项目中遇到一个问题，就是在跳转指定路由后，动态设置高亮显示。如图 然后封装了一个utils函数用来解决此问题。直接上代码： // 改变路由跳转后的高亮显示 // 参数1:index下标 // 参数2:element 元素类名 // 参数3:activeName 高亮类名 export default function (index, element, activeName) { // 获取所有节点,注意querySelectorAll是按顺序获取节点的. let allE
vue中的路由高亮
weixin_34008933的博客
09-25 177
转载于:https://www.cnblogs.com/huanhuan55/p/9700634.html
Vue路由(router-link)——高亮、动态传参
最新发布
m0_53951384的博客
11-07 3677
router-link的两个高亮类名 太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）
vue中实现路由高亮的两种方式
weixin_44759289的博客
11-14 611
1、当我们引入vue-router这个包时，他为我们提供了一个类叫做.router-link-active,我们可以通过设置它的样式实现高亮显示，例如: .router-link-active{ /* vue-router提供了这个类 */ color:red; font-weight: 800; fo...
vue中headers是什么_vue项目实现页面中header组件的复用
weixin_39700220的博客
02-22 1265
前言：vue项目页面开发中，经常会发现很多页面有相似或相同的内容，如很多页面都有header部分，你会发现除了个别的标题不一样，其他部分基本相同，虽然我们也可以每个页面都写一个header，但是当页面很多时，这样就显得有点累赘或者影响开发效率，所以我们在进行开发前，可以先根据设计稿进行分析，定义一个可以实现复用的header组件，对于个别比较特别的header，我这里结合了vue的slot进行区别...
Vue el-menu高亮设置及点击菜单项实现路由跳转
热门推荐
爱哭的毛毛虫的博客
11-13 1万+
el-menu相关知识记录一、el-menu菜单项高亮设置二、点击菜单项实现路由跳转 2021/11/13 知识点记录 一、el-menu菜单项高亮设置 el-menu高亮是通过:default-active来设置的，一般我们都是绑定$ route.path或者$route.name这两个值，因为他们基本上都是唯一的，对于高亮的判断这是通过将:default-active绑定的值与菜单项的唯一标识index比较来显示是否高亮，如果相同则高亮。 $ route.path对应当前页面路由的路径。 $ route
vue设置header
06-01
在 Header 组件中，可以使用 Vue Router 的 $route 对象来获取当前路由信息，然后根据路由信息来设置 Header 的标题。 ``` <Header :title="$route.meta.title" /> import Header from './components/...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值