技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效

2024-04-10 13:31:09

#vue3-cli4.5项目技巧1 router-link导航鼠标切换样式 vue3中.router-link-exact-active失效 vue3exact-active-classs失效

vue2用法

我们可以打开链接的样式看一下：

可以看到router-link实际上就是a标签，在style里面给a标签添加普通样式就可以了。

如果我想鼠标点击标签有一个选中状态：

可以观察：router-link有两个class样式，router-link-active, 和router-link-exact-active.

所以，我们可以给router-link加样式：

给router-link加样式第一种方式

这个类选择器相当于伪类选择器：active,点击变样式。

<style lang="less">// 给router-link加样式
.router-link-exact-active{color:red;
}
</style>

给router-link加样式第二种方式

<router-link exact-active-class="on">样式</router-link>
<style scoped>.on{color:orangered;text-decoration: none;}
</style>

在vue3中使用失效

vue3中按上述做，router-link并不能变样式，并且还是官方的绿色样式，显然在vue3中这个属性已经不适用了。
因为在vue2中 router-link-active 本就不是精确匹配，只要路由路径包含router-link组件的to属性值，就可以在链接激活时设置CSS类名，而vue3不是这样，router4已经改变。

vue3的router-link样式方法

共有三步：按照我的代码标注走。

<template><div><!-- 1.router-link里面一定要写成 文字和router-link隔着一个标签 --><router-link to="/" exact><span>首页</span></router-link><router-link to="/goodscate"><span>分类</span></router-link><router-link to="/mycart"><span>购物车</span></router-link><router-link to="/userhome" ><span>我的</span></router-link></div>
</template><script>export default {name: 'footer1',data() {return {}},   }
</script>
<style scoped>/* 3.router-link内部样式是由这个指定的active决定的  *//* 它下面的span标签是给文字换鼠标点击样式颜色的 */.active span{color: #0984e3;}
</style>

找到项目的router/index.js

const router = createRouter({// 2. 满足vue3的router-link样式的第二步，active为class名linkActiveClass: 'active',history: createWebHistory(process.env.BASE_URL),routes
})

效果：

鼠标点击两张图片切换状态图片+文字切换

鼠标点击两张图片的切换状态

技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效相关推荐

Vue3中的Vue Router初探
对于大多数单页应用程序而言,管理路由是一项必不可少的功能.随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的. Vue3中的许多更改都会稍微改变 ...
（转）OL2中设置鼠标的样式
http://blog.csdn.net/gisshixisheng/article/details/49496289 概述: 在OL2中,鼠标默认是箭头,地图移动时,鼠标样式是移动样式:很多时候,为 ...
【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大 ...
kde 配置桌面_在KDE桌面中为GTK应用程序配置鼠标光标样式
kde 配置桌面 Update on Jan. 7, 2012: The package for the gtk application style setting on KDE 4.7 is kcm ...
【原】简单的鼠标切换左右键(java版)
简单的鼠标切换左右键(java版) 0. 写在最前面客户需要一个能切换左右键的小功能满足使用需要. 具体需要如下: 我需要一个独立运行的窗口,在其中输入数字x,按下"转换"按钮后 ...
使用vite安装vue3项目，vue3安装router和vuex
目录安装vite/创建vue3项目安装router 安装vuex vite+vue3的axios配置及跨域安装vite/创建vue3项目推荐vite+vue3+elementplus教程,看这 ...
CSS鼠标悬浮样式全
hover鼠标悬浮的使用和定义用法示例选择鼠标指针浮动在其上的元素,并设置其样式: .box:hover{background-color: red;} 定义和用法 :hover 选择器用于选择 ...
【Qt】qss样式表之：自定义属性实现动态切换样式
1.问题描述例如在播放器中播放按钮,由"播放"状态切换成"暂停"状态后,响应的图标要跟着状态切换. 2.解决方法使用qss样式表中的属性功能,自定义一个属性 ...
css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...

最新文章

热门文章