vue 路由切换选中样式

最新推荐文章于 2024-04-25 15:28:41 发布

zlting~

最新推荐文章于 2024-04-25 15:28:41 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/106999208

本文介绍了在Vue中如何实现路由切换时的选中样式，包括两种方法：通过获取当前路径来设置样式，以及结合Element UI库进行样式处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取当前路径

<div class="navBox">
   <p 
    v-for="(item,index) in globalEngineerNav" :key="index" 
    :class="{'isSelected': activeIndex === item.url}" 
    @click="handleLink(index)">
    <span>{
   
   {
   
    item.name }}</span><i></i>
   </p>
 </div>

globalEngineerNav: [
        {
   
   
          name: 'Home',
          url: '/AI'
        },
        {
   
   
          name:

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zlting~

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue 公用导航路由切换改变样式

qq_33646205的博客

04-16

1461

<template> <div class="tabbar"> <router-link v-for="(item, index) in navlist" :to="item.url" @clik.native="linkTo(item.url)" exact> <img v-if="$route.path.indexOf...

vue-router二级导航切换路由及高亮显示的实现方法

12-09

在这个示例中，我们将看到如何在 Vue 应用中实现二级导航的路由切换以及高亮显示。首先，我们要创建导航页面的样式。在 `Discover.vue` 和 `Mymusic.vue` 文件中，我们定义了两个简单的组件，分别代表一级导航的...

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

Vue 设置选中路由的样式

weixin_43912756的博客

03-22

1068

vue导航选中切换样式及默认选中样式

weixin_61273407的博客

03-28

1262

结构层 : <block v-for="(item, i) in titleTxt" :key="i"> <view :class="[{ active:title == item }]" @click="checked(item)">{{ item }}</view> </block> 行为层 : data() { return { titleTxt: ['采购','仓库','出库','入库'], title: '...

切换选中变样式

xiaoyuliuliu的博客

08-09

187

有时候，一个列表，要实现点击某一项，选中的这一项要添加选中的样式。实现思想：定义一个变量current，点击列表的某一项时，将这一项的值赋值给current，当current等于这一项时，对应上的（满足条件的）动态添加上class即可。 <ul> <li :class="current==index?'hover':''" v-for="(item,index) in list" :key="index" @click="change(item,index)"></li&gt

vue设置选中时的样式名称

weixin_30666753的博客

03-12

391

第一种方式：在router中全局设置 export default new Router({ mode:'history', linkActiveClass:'index', routes: [ { path: '/', name: 'index', redirect:{ pa...

vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

10-18

这个问题通常发生在当我们有多个同级路由，并且在切换子路由时，希望父路由的选中状态能够正确反映当前的路由路径。首先，让我们看下初始的路由配置。在Vue CLI项目中，路由通常定义在`src/router/index.js`文件中...

Vue 解决父组件跳转子路由后当前导航active样式消失问题

11-20

总结起来，Vue Router中的导航激活样式问题通常可以通过正确选择和使用`router-link-active` 类来解决，而对于Element-UI的`el-menu`，绑定`default-active`至`$route.path`可以确保菜单项的激活状态与路由匹配。...

vue 组件选中样式和只展开一项

潇蓝诺依的博客

08-30

1490

效果图父组件 &amp;lt;template&amp;gt; &amp;lt;div style=&quot;&quot;&amp;gt; &amp;lt;div &amp;gt; &amp;lt;open v-for=&quot;(item,index) in list&q

vue——分类，选中样式效果

努力、拼搏、奋进

04-07

520

vue——分类，选中样式效果

vue实现点击追加选中样式效果

10-16

今天小编就为大家分享一篇vue实现点击追加选中样式效果，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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

10-16

今天小编就为大家分享一篇vue 导航内容设置选中状态样式的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue选中切换样式

qq_44353287的博客

03-09

384

<div class="function"> <span :class="{currentPage:currentTag==0}" class="zhuye" @click="homeClick" >主页</span>| <span :class="{currentPage:currentTag==1}" class="fabiao" @click="blogPublish">发表文章</span>|

vue elementui el-table表格点击单元格添加选中样式

Z18834071903的博客

04-25

3003

vue elementui el-table表格点击单元格添加选中样式

vue 路由高亮模式(即给页面路由名称添加样式)

weixin_43294560的博客

02-16

1203

路由高亮模式将当前所在路由名称包括父路由的名称变成红色第一种: 在主入口文件App.vue的style中设置 .router-link-active{ color:red; } 第二种: 1、在总路由js文件中,和routes同级 linkActiveClass:'xx', 2、在主入口文件App.vue的style中设置 .xx{...

VUE点击div选中多个选项并改变其样式（类似多选）

zsj702177的博客

08-25

2151

【代码】VUE点击div选中多个选项并改变其样式（类似多选）

vue技巧：多标签可点击、选中、样式变化

希望看完文章的你能够带着答案离开。

01-14

5342

vue技巧：多标签可点击、选中、样式变化

使用vue脚手架，点击导航切换不同路由且给导航切换样式，发现点击样式存在冲突（解决办法）

weixin_45294459的博客

10-18

527

项目场景： html: <ul class="tsmenu"> <router-link to="/"> <li :class="{yuanshi:yuanshi}" @click="dianji">商城</li> </router-link> <li :class="{yuanshi:yuanshi1}...

vue路由变化时，改变导航栏的样式并切换页面

m0_64205744的博客

04-18

3454

记录会遇到的问题，复习小笔记！各种导航栏适用，单机某个导航按钮，跳转另一个页面，并改变导航栏样式。这里我用的是通过动态class和$route.path来实现tab样式的切换导航栏页面请自行解析，有问题留言哈 <template> <div> <ul class="hlist_content" v-show="isShow2"> <!-- <li v-for="(ite

vue tabs页切换选中