linkActiveClass

最新推荐文章于 2024-08-02 17:03:03 发布
原创 最新推荐文章于 2024-08-02 17:03:03 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍 Vue.js 中 router-link 的 linkActiveClass 属性使用方法，此属性用于设置激活状态下的链接样式，默认为 router-link-active。通过 CSS 可以自定义此状态下的显示效果。

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

linkActiveClass

  • 类型: string

  • 默认值: "router-link-active"    //router到这个地方会自动生成这个class

    全局配置 <router-link> 的默认『激活 class 类名』


<style lang="stylus" ref="stylesheet/stylus">
    .tab
      display: flex
      width: 100%
      height: 40px
      line-height: 40px
      .tab-item
        flex: 1
        text-align:center
        & > a
          display:block
          font-size: 14px
          color: rgb(77, 85, 93)
        & > a.router-link-active     //router到这个地方会自动生成这个class
            color: red
            font-weight:500px
            background: rgba(0, 0, 0, 0.2)
</style>
vue2.0 小记
超级小东的博客
06-03 233
事件修饰符 .self 点击自己才会触发，包括冒泡情况也会跳过 .capture 冒泡顺序倒置 绑定类名 :class="[‘classname’,flag ? ‘classname’ : ‘’,{‘classname’ : flag}]" {‘需要绑定的类名’:是否绑定} 该对象也可以在data中声明赋值 绑定样式 :style="{color:‘red’,‘font-size’:‘16px’}" 样式的名称带-，必须用’'括起来；多个对象绑定时:style="[obj1,obj2]" v-on绑定事件
vueRouter 重定向 高亮 传参 嵌套 简单示例
paidaboluo的博客
08-08 461
vueRouter 重定向 高亮 传参 嵌套 简单示例
vue.js默认路由不加载linkActiveClass问题的解决方法
11-28
发现问题 最近在打开项目的时候，发现我的默认路由没加载上linkActiveClass， 网上一搜，发现很多同学也有这个问题，查了一些资料发现这是个重定向的问题，官网文档是这么写的 https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html 重定向 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b： const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命名的路由：
router-link组件中的属性——active-class
2201_75773271的博客
08-02 937
因为to="/" 引起的， active-class选择样式时根据路由中的路径去匹配， 然后显示， 例如在my页面中， 路由为localhost:8081/#/my，那么to="/”和to="/my"都可以匹配到， 所 有都会激活选中样式。
vue-router中的router-link的active-class
weixin_34032779的博客
01-29 1783
在vue-router中要使用选中样式的方法有两种： 1、直接在路由js文件中配置linkActiveClass 2、在router-link中写入active-class 问题：如果就这样，那么会出现一个问题，不管跳转到哪里，跳转到根目录的那个连接（to="/"） 始终都会有选中样式 　　为什么会这样呢？查阅文档：https://route...
router.js中的一个属性linkActiveClass
weixin_43837268的博客
01-09 333
import Vue from 'vue'; import Router from 'vue-router'; import Login from './views//Login'; import Home from './views/Home'; Vue.use(Router); export default new Router({ mode: 'history', base: ...
我的项目的index.ts该怎么配置，参考原来项目的代码：// history模式 import { createRouter, createWebHashHistory } from “vue-router”; //Vue.use(createRouter) const routes = [ { path: “/”, meta: { name: “首页”, }, component: () => import(“…/pages/index.vue”), }, { path: “/envi”, meta: { name: “智慧环卫”, }, component: () => import(“…/pages/air-tem.vue”), }, { path: “/index”, meta: { name: “高分卫星”, }, // component: () => import(“…/pages/air.vue”), component: () => import(“@/components/common-map/live-map2.vue”), }, { path: “/illegal”, meta: { name: “态势监测”, }, component: () => import(“…/pages/VideoF.vue”), }, { path: “/VideoF”, meta: { name: “AI视频识别”, }, component: () => import(“…/pages/VideoF.vue”), }, { path: “/test”, meta: { name: “xxxx”, }, component: () => import(“…/views/home/mainPage.vue”), }, { path: “/location”, meta: { name: “AI视频识别”, }, component: () => import(“…/components/popup/Location.vue”), }, ]; const router = createRouter({ history: createWebHashHistory(), linkActiveClass: “active-item”, routes: routes, }); export default router; 你告诉我
最新发布
07-09
- **激活类名**：保留 `linkActiveClass: "active-item"` 确保菜单激活样式 ### 4. 组件路径 - **懒加载**：使用动态导入 `() => import(...)` 实现组件懒加载 - **路径规范**：使用 `@/` 别名代替相对路径，提高...
vue路由中设置linkActiveClass
weixin_30415113的博客
07-23 445
路由 export default new Router({ linkActiveClass: 'active',//设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项linkActiveClass来全局配置 routes: [ ] }) css .nav .active { color: #ffbb22; ...
vue路由中的linkActiveClass属性
6块腹肌的博客
06-09 6893
用法示例： 模板： <div class="nav"> <router-link class="nav-item" to="/nav1">nav1</router-link> <router-link class="nav-item" to="/nav2">nav2</router-link> <router...
路由懒加载问题和linkActiveClass属性
chengxue_123的博客
11-18 569
1.路由懒加载问题 :就是需要的时候调用 好处:就是在需要运行的时候才调用,加快加载速度,提高用户体验 具体来说:vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时 简单说 :进入首页不用一次加载过多资源造成用时长 const routes = [ ..
vue-router linkActiveClass问题
weixin_30670151的博客
03-07 236
在使用vue做移动端的时候，底部四个菜单中当前菜单需要高亮显示，但是由于路由配置的问题导致了下图中的问题： # 首页会一直常亮，不论是否有点击（路由配置如右图） 经过排查，发现问题出现在router中配置的路由路径存在两个“/”，才导致了这个问题，修改任意一个path值即可恢复正常。如下图： 转载于:https://www.cnblogs.com/muou2125/p...
Vue Router构建选项linkActiveClass全局配置菜单高亮显示遇到的问题：默认第一个router-link高亮，点击第2个router-link第一个高亮不会被去除
u010234868的专栏
11-30 1255
目录： 初始代码如下： App.vue： <template> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> <router-view /> </div> </template> <script> exp
router-link进行高亮设置：全局配置linkActivateClass
baiye
02-06 1247
需求描述 点击某个按钮会产生高亮效果 方法 页面渲染后，router-link会自动转变为a标签。在点击“评论”时，class标签中会出现router-link-activate，这是vue-router提供的默认值，可以使用main.js（router.js）进行改变。 为了实现这一改变，我们可以使用linkeActivateClass属性。这个属性的作用是定义被激活的链接元素的类名。 在main.js（router.js）进行如下配置 // The Vue build version to loa
linkActiveClass 和 linkExactActiveClass 这俩啥区别以及exact的作用
脑瓜疼儿的博客
12-28 3619
linkActiveClass 是模糊匹配 linkExactActiveClass 是精准匹配 exact也是精准的意思 官网提供的链接: https://jsfiddle.net/8xrk1n9f/ 当是模糊匹配时: i.router-link-active a { color: #f66; } 当是精准匹配时 i.router-link-exact-active a { co...
Vue linkActiveClass的简单使用
hejiubukaiche1的博客
04-29 399
Vue linkActiveClass 简单使用
Vue Router RouterOptions（linkActiveClass、linkExactActiveClass）
Vinca@的博客
07-17 1221
在实际开发中，可以通过动态设置这些类名，或者结合条件来自定义样式，以便更好地反映当前路由的状态。以下是一个简单的示例，展示了如何使用 linkActiveClass 和 linkExactActiveClass，以及如何根据不同的路由状态自定义类名。
vue-router里面的linkActiveClass用法
wushen的博客
08-19 1440
每次路由切换成功进入激活状态 在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？ 如何做？ 在路由里面设置 linkActiveClass: ‘is-active’, const router = new VueRouter({ routes, linkActiveClass: 'is-active' }); 然后在css里面设置 .is-active{ background:red; } 这样被点击激活的时候就会被加上is-active这个class了。注意如果没
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值