vue 导航内容设置选中状态样式

最新推荐文章于 2023-06-02 17:09:22 发布

原创最新推荐文章于 2023-06-02 17:09:22 发布 · 6.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#导航切换选中样式设置

VUE 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种简单的方法来改变router-link选中时的样式。通过使用router-link-active类，可以轻松地为选中的导航项设置特定样式，如将字体颜色更改为红色。

如图所示，我们一般需要切换的时候选中导航给个active样式，

而router-link 标签 在选中的时候  会自动给整个标签添加一个 router-link-active的class

可给router-link 标签里面的span、i标签如下设置，非常简单，下面是stylus的写法，不需要的话也可以写成平时的css写法

.router-link-active
        span
        i
            color: red

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Web攻城狮-前端

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue 设置选项卡选中效果

HackMasterX的博客

09-30

417

为了提高用户体验，我们通常会给当前选中的选项卡添加一个特殊的样式，以突出显示其选中状态。通过以上代码，我们实现了一个简单的选项卡组件，并为选中的选项卡添加了特殊的样式。在该组件中，我们可以使用一个数组来存储选项卡的数据，例如选项卡的标题和内容。同时，我们还需要使用一个变量来记录当前选中的选项卡的索引。最后，我们为选项卡的标题和内容定义了一些简单的样式。选中的选项卡的标题背景色为浅灰色，选项卡的内容之间有一定的间距，并带有边框。变量用于记录当前选中的选项卡的索引，默认为 0。的值，从而实现选项卡的切换。

🏆 前端领域优质创作者

12-01

3425

vue2，vue3，多选，复选列表，vue多选列表，一键全选，一键反选，选中多个选项，并且使其高亮，取消选中，点击选中，多选选项，几个选项可点击多选，多选列表，多选标签，全选和反选，数据回显，能设置默认初始选中的多选，赋值默认数据让列表回显选中几个，列表点击选中并且高亮显示支持全选和反选，回显设置默认选择数据的功能，点击选中并改变样式，点击选中并高亮展示，复选框，胶囊椭圆形的多选，实现多选,点击选中并改变样式(可取消)，实现列表数据选中多个功能，多选标签/多选按钮/多选框，列表多选如何回显数据，微信多选全选

参与评论您还未登录，请先登录后发表或查看评论

Vue使用routerlink实现点击导航栏进行页面跳转

闷闷闷闷闷小菇的博客

12-19

5176

实现内容如图所示，要实现的是：点击导航栏中的Data Set, Data Mining, Result List, Model List区域跳转至对应界面。使用router-link来实现跳转 1.如代码所示，router-link后面的to需要的内容是要跳转界面的路径，这个路径在src–&gt;router–&gt;index.js中进行编辑。同时需要保证这些跳转界面的vue文件已存在。 ...

样式默认选中的状态

05-29

588

转载于:https://www.cnblogs.com/BoYu045535/p/3760104.html

vue 导航路由跳转点击两下，才会有选择中状态解决方案

Armof的博客

09-13

1846

1.vue 导航路由跳转点击两下，才会有选择中状态 2.问题本质是传递激活状态 3 在data面 **curren：0，**改进为 **current:this.$route.query.current | 0, 4.在点击时间里面添加 this.$router.push({path:toPath,query:{current:index}}) ...

vue 导航内容设置选中状态样式的例子

10-16

在这篇文章中，作者介绍了一个在Vue项目中实现导航内容选中状态样式的例子，这通常用于区分当前激活的导航链接。这个功能对于提升用户界面体验尤为重要，因为它向用户清楚地标识了当前页面或组件的状态。下面，我们...

vue实现导航栏效果（选中状态刷新不消失）

11-27

总的来说，实现一个具有刷新后保持选中状态的Vue导航栏，需要结合Vue的数据绑定、事件处理、路由跳转和浏览器的`sessionStorage`。通过这种方式，我们可以提供更优秀的用户体验，确保用户在导航时的连续性。

使用element-ui的el-menu导航选中后刷新页面保持当前选中状态

10-16

UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据当前路由动态设置选中和展开...

解决vue-router 二级导航默认选中某一选项的问题

10-16

在使用Vue.js开发单页面应用程序时，我们经常会用到vue-router来管理路由。但在使用路由之外，对于带有二级导航的页面，如何正确地...希望本文提供的知识点能够帮助开发者们更加高效地处理Vue应用中的导航选中问题。

状态样式

dai_js的博客

03-11

391

.label-important, .badge-important { background-color: #b94a48; } .label-important[href], .badge-important[href] { background-color: #953b39; } .label-warning, .badge-warning { background-co...

vue动态class——实现tag的选中状态

weixin_30588827的博客

07-30

724

vue动态class——实现tag的选中状态 <template> <div class="common-nav"> <div class="nav is-flex"> <div class="nav-left"> <router-link to="/" class="nav-left-a"...

vue3+el-menu实现路由刷新左侧菜单栏保持选中状态

m0_59006402的博客

05-23

2352

给 el-menu 加上 :default-active="this.$route.path"问题描述：使用el-menu 实现管理系统左侧菜单栏的时候，刷新页面，菜单栏的选中状态消失。

vue点击导航菜单，展示选中样式，菜单路由存在嵌套路由时也可以判断为当前路由

AKindofo的博客

06-02

684

【代码】vue点击导航菜单，展示选中样式，菜单路由存在嵌套路由时也可以判断为当前路由。

Vue 实现导航栏滑到顶部固定，滑动到相应位置导航栏有相应选中效果，点击导航跳转到对应位置

yhl_nsd的博客

03-23

9987

主要思路 导航栏固定判断页面卷曲是否大于导航栏的offsetTop的值，超过了就证明导航栏到达了顶部，给导航栏添加固定样式的类名，注意：需要拿到导航栏固定前的offsetTop值，固定后的offsetTop值为0，会导致页面需要卷曲值为0时，导航栏才复位，中间会有一段突兀的情况。滑动到相应位置导航栏有对应选中样式 html结构 <div class="about"> <div class="banner"><div class="wrap">&lt

vue二级菜单导航点击选中事件