VueJS 精确活动类

2024-05-21

我有一个使用 Router-link 的菜单,当 Router-link 被激活时,我想将类“Active”放在“li”上。

<ul class="nav nav-second-level">
    <li v-for="item in menu">
        <router-link :to="{ name: somewhere }" tag="a" exact-active-class="IS-ACTIVATED">
            {{Name}}
        </router-link>
    </li>
</ul>

有没有办法使用“exact-active-class”将类设置为父类?

Thanks!


您可以使用v-if检查您所在的路线并添加班级,如果$route.name is somewhere

<ul class="nav nav-second-level">
     <li v-for="item in menu" :class="{ 'IS-ACTIVATED': $route.name === somewhere }">
         <router-link :to="{ name: somewhere }">
             {{Name}}
         </router-link>
     </li>
 </ul>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VueJS 精确活动类 的相关文章

  • VueJS - 访问已安装的存储数据

    我无法理解以下内容 我有一个store其中包含应用程序所需的变量 特别地 有一个globalCompanies哪些商店 globalCompanies current all currentName 在另一个组件中 我想执行以下操作 mou
  • 如何在Vue中提交表单,重定向到新路由并传递参数?

    我正在使用 Nuxt 和 Vue 我正在尝试提交表单 将用户重定向到包含提交的参数的新路由 发送 API 请求以获取一些数据 然后渲染该数据 我通过简单地将表单操作设置为新路径并手动将所有 URL 参数添加到 API 请求来实现此目的 首先
  • Vue 3:使用渲染函数将所有项目包装在一个自定义组件中

    我正在尝试建立自己的sortable成分 我想将项目列表传递到它的默认插槽 然后 可排序组件应该用自定义包装所有传递的项目v draggable成分
  • 可以用vue-chartjs打印图表吗?

    我正在使用 vue chartjs 在网络应用程序上渲染图表 我知道如果您使用原始版本 您可以打印图表library https canvasjs com docs charts methods chart print 但是我不知道如何使用
  • 如何在 vuex nuxt 中获取嵌套 getter

    i have store index js像这样 new Vuex Store modules nav namespaced true modules message namespaced true state count 0 conver
  • Vue js - 在同一级别的两个组件内传递数据

    我有需要从一个传递的数据component1到另一个component2 我不使用vuex or router 组件树 Parent Component1 Component2 从一开始component1我发出 ajax 请求 检索信息并
  • 无法使用Vue获取灵活元素的CSS属性值

    我正在尝试获取 CSSwidth灵活元素的属性 但由于某种原因它不起作用 代码笔 https codepen io anon pen pLEwdp editors 1010 https codepen io anon pen pLEwdp
  • 未向导出的模块提供此上下文

    我对问题的提出感到不满意 受到鼓励提出改进建议 另外 请记住 由于无知 无知导致烦恼 我对问题的诊断可能有缺陷 对于那个很抱歉 In 这个答案 https stackoverflow com a 40893583 1525840建议使用th
  • vue如何检测页面是否刷新?

    我尝试这样 created window addEventListener beforeunload function event event returnValue Write something this router push 像这样
  • 有没有V型斗篷的反面?

    根据VueJS 文档 https v2 vuejs org v2 api v cloak v cloak 指令可用于隐藏未编译的 Mustache 绑定 直到 Vue 实例准备就绪 换句话说 我可以隐藏一个div或类似的东西 当 vue 准
  • Vuetify 自动完成类似项目未显示

    我的本地案例中有类似标题的自定义帖子API我尝试通过搜索查询显示帖子items array Data count 5 entries id 3 title Senior developer Python id 4 title Senior
  • 从组件传递数据

    我对 Vue 相当陌生 我正在尝试将数据从组件传递到视图 我不确定我是否在使用props正确的 我有一个对话框 当我保存时 我想将数据插入数据库 我也想重复使用addCustomer function 这就是为什么我没有将该函数放置在组件中
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • Vue中有类似React.Fragment的东西吗?

    在 React 中我可以做这样的事情 parent component export default return div div 1 div div
  • Vue.js 未捕获类型错误:_vueChartjs.Line.extend 不是函数

    刚刚启动 Vue js 和 webpack 我正在尝试将 vue chartjs 功能添加到我的项目中 我收到以下错误 Uncaught TypeError vueChartjs Line extend is not a function
  • 如何处理 Nuxt 中导致页面渲染崩溃的 apollo 客户端错误?

    我目前正在维护一个生产 Nuxt js Vue 应用程序 该应用程序集成了 GraphQL Apollo 客户端 该客户端遇到页面渲染错误 为了增加获得回复的机会 我构建了一个简单的代码示例 仅展示我们遇到的问题 谢谢大家 源代码 Clie
  • 在重复内容区域添加

    我有一个菜单组件 简单地说 它接受一个带有一系列选项的道具 并为每个选项在菜单中呈现一个项目 我希望能够根据用例自定义每个菜单项内的标记 因此我在菜单项元素内使用了占位符 你可以在这个中看到一个例子fiddle https jsfiddle
  • 如何在生产模式下为 Chrome 扩展启用 Vue 开发工具?

    我正在构建一个 chrome 扩展 并使用 vue cli webpack 配置 我希望能够在运行后使用 vue devtoolsnpm 运行构建命令 我尝试添加Vue config devtools true 在 main js 中 或者
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • (thread_id_key != 0x7777),函数 find_thread_id_key,文件 ../src/coroutine.cc,第 134 行

    我正在开发一个vue程序 我尝试过npm run serve 然后我得到了这个 66 building 670 715 modules 45 active Users bytedance go src code byted org ad o

随机推荐

  • 使用 pygame 显示 unicode 符号

    我检查了其他答案 但不明白为什么我的代码错误地显示 This is what I currently see https i stack imgur com 8tNIK png 这是关于文本渲染的相关代码 font pygame font
  • 我应该使用 JDBC getNString() 而不是 getString() 吗?

    我们正在构建一个由 Oracle 数据库支持的 Java 应用程序 我们使用 JDBC 驱动程序 访问该数据库ojdbc6 jar and orai18n jar 数据库模式主要使用以下方式存储文本列NVARCHAR2数据类型 The JD
  • PHP:展平数组-最快的方法? [复制]

    这个问题在这里已经有答案了 是否有任何快速方法可以在不运行 foreach 循环的情况下展平数组并选择子键 在本例中为 键 和 值 或者 foreach 始终是最快的方法 Array 0 gt Array key gt string val
  • PostgreSQL 和锁定

    希望一些比我更聪明的 DBA 可以帮助我找到一个好的解决方案来完成我需要做的事情 为了便于讨论 我们假设我有一个名为 work 的表 其中包含一些列 其中一列表示给定客户端对该行工作的所有权 场景是 我将连接 2 个客户端并轮询表以查找要完
  • 如何以“正确”的方式处理带有空字节的 Python unicode 字符串?

    Question PyWin32 似乎很乐意将 null 终止的 unicode 字符串作为返回值 我想以 正确 的方式处理这些字符串 假设我得到一个像这样的字符串 u C Users Guest MyFile asy x00 x00sy
  • gsub 的转义字符串

    我读了一个文件 local logfile io open log txt r data logfile read a print data output n w r 1 2 n t x re S 是的 日志文件看起来很糟糕 因为它充满了各
  • 如何通过 HTML 按钮播放声音

    我目前通过网站播放音乐的方法是通过 HTML 音频标签 不过我希望能够通过 HTML 按钮来播放它 该按钮应该能够在播放和停止之间切换音乐 我在 JSFiddle 创建了一个示例 但不知道如何实现它 有人可以告诉我如何使用我的 JSFidd
  • python 中的并行处理

    在 python 2 7 中进行并行处理的简单代码是什么 我在网上找到的所有示例都很复杂 并且包含不必要的代码 我该如何做一个简单的强力整数分解程序 在每个核心 4 上分解 1 个整数 我真正的程序可能只需要2个核心 并且需要共享信息 我知
  • 水豚可以与隐藏元素互动吗?

    我有一个文件字段opacity 0并且与一个假按钮重叠 这是一种常见的 CSS 技术 用于伪造一种在不同浏览器中一致显示的 上传按钮 水豚不允许我打电话attach file在该输入上 错误是Selenium WebDriver Error
  • 由于预发布,Node 应用程序无法运行

    即使安装成功 我也会安装无效的软件包 顺便说一句 这个问题与答案相关 关于版本控制的问题 https stackoverflow com questions 27628153 npm versioning how does this edg
  • 在 org.apache.spark.sql.types.DataTypes 中找不到 uuid

    我们有一个 PostgreSQL 表 其中 UUID 作为列之一 我们如何将 Spark 数据集中的 UUID 字段 使用 Java 发送到 PostgreSQL DB 我们无法在 org apache spark sql types Da
  • 在我的 Julia 1.0.0 REPL 中,LOAD_PATH 返回意外结果

    我的 Julia REPL 帮助为 LOAD PATH 提供了以下内容 help gt LOAD PATH search LOAD PATH LOAD PATH An array of paths for using and import
  • SQL中如何识别字符串的第一个字符是数字还是字符

    我需要将数据中的第一个字符识别为 SQL Server 中的数字或字符 我对此比较陌生 我不知道从哪里开始 但这是我到目前为止所做的事情 我的数据看起来像这样 TypeDep Transfer From 4Z2 Transfer From
  • 我应该把 try/catch 和“using”语句放在哪里? [复制]

    这个问题在这里已经有答案了 可能的重复 try catch using 正确的语法 https stackoverflow com questions 4590490 try catch using right syntax 我想try c
  • opencv水印周围的轮廓

    我想在图像中的水印周围画一个框 我已经提取了水印并找到了轮廓 但是 不会在水印周围绘制轮廓 轮廓是在我的整个图像上绘制的 请帮我提供正确的代码 轮廓坐标的输出为 array 0 0 0 634 450 634 450 0 dtype int
  • 如何计算表格上的错误数量?

    FIDDLE http jsfiddle net FeS4A 78 我如何计算表格上的错误数量 HTML div Sorry but 3 errors have been made div 您可以通过使用特定错误标准的特定计数来实现此目的的
  • ReportViewer 的打印按钮与 IE 10 不兼容?

    我已经寻找这个问题的答案两天了 我们有一个使用 ReportViewer 9 的应用程序 但是 单击 IE10 中的打印按钮会导致浏览器停止工作 使用 调试 或 关闭程序 按钮 其他一切似乎都工作正常 我们尝试使用 ReportViewer
  • Ant 中回显目标描述

  • 使用 python 中的公式函数使从 Excel 中提取的值的百分比相等

    import xlrd numpy excel Users Bob Desktop wb1 xlrd open workbook excel assignment3 xlsx sh1 wb1 sheet by index 0 colA co
  • VueJS 精确活动类

    我有一个使用 Router link 的菜单 当 Router link 被激活时 我想将类 Active 放在 li 上 ul class nav nav second level li li ul