在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由路径,其中后者无法和前者一样设置类名,也就是 router-link-active 加不上

在vue2中可以实现,因为 router-link-active 本就不是精确匹配,只要路由路径包含router-link组件的to属性值,就可以在链接激活时设置CSS类名

但是在vue3中,无法实现


在查看官方回答后,该属性有新的改变

也就是说,如果在Router v4中,如果想使用 router-link-active ,路由路径包含需要包含router-link组件的to属性值 且 需要路由嵌套关系。

原路由:

{
path: '/member',
component: MemberLayout,
children: [
{ path: '/member', component: MemberHome },
{ path: '/member/order', component: MemberOrder },
{ path: '/member/order/:id', component: MemberDetail }
]
}

更改后:

{
path: '/member',
component: MemberLayout,
children: [
{ path: '/member', component: MemberHome },
// { path: '/member/order', component: MemberOrder },
// { path: '/member/order/:id', component: MemberDetail }
{
path: '/member/order',
// 创建一个RouterView容器形成嵌套关系
component: { render: () => h(<RouterView />) },
children: [
{ path: '', component: MemberOrder },
{ path: ':id', component: MemberDetail }
]
}
]
}

在vue3中使用router-link-active遇到的坑的更多相关文章

  1. Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务

    前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...

  2. 解决vue-router中this.$router.push无法在新窗口中打开

    解决vue-router中this.$router.push无法在新窗口中打开 let routeData = this.$router.resolve({ path: '/consult', que ...

  3. 全面解析JavaScript的Backbone.js框架中的Router路由

    这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...

  4. vue中的router和route有什么区别?

    我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...

  5. vue3中使用axios如何去请求数据

    在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...

  6. vue3中watch函数

    watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newV ...

  7. 端午总结Vue3中computed和watch的使用

    1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...

  8. vue 3 学习笔记 (七)——vue3 中 computed 新用法

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...

  9. Vue中this.$router.push(参数) 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

随机推荐

  1. webpack 项目接入Vite的通用方案介绍(上)

    愿景 希望通过本文,能给读者提供一个存/增量项目接入Vite的点子,起抛砖引玉的作用,减少这方面能力的建设成本 在阐述过程中同时也会逐渐完善webpack-vite-serve这个工具 读者可直接fo ...

  2. 力扣 - 剑指 Offer 12. 矩阵中的路径

    题目 剑指 Offer 12. 矩阵中的路径 思路1(回溯.DFS) 这题可以使用回溯+递归来解决,思路如下: 将二维数组的每一个元素都作为起点进行回溯查找 每次查找的时候,都有四个方向,但是上一个方 ...

  3. [nowcoder5668J]Operating on the Tree

    考虑令$a_{i}$为i的位置,$p_{i}=0/1$表示第i个点的贡献,那么$p_{x}=0$当且仅当存在与其相邻的点$y$满足$a_{y}<a_{x}$且$p_{y}=1$ 树形dp,定义状 ...

  4. [nowcoder5669A]Ancient Distance

    对于一个$k$,可以二分枚举答案并判断,判断过程可以贪心找最深的点(线段树区间max)+倍增+线段树区间覆盖(清0)来实现,时间复杂度$o(klog_{2}n)$ 考虑反过来,暴力枚举答案$x$并求出 ...

  5. 数字逻辑实践2->Verilog编写规范

    来源:数字逻辑与Verilog设计实验课讲解,个人做的笔记与整理. 00 规范的重要性 良好的编程风格有利于减少消耗的硬件资源,提高设计的工作频率 . 提高系统的可移植性和可维护性. 程序的格式化能体 ...

  6. led汇编点灯

    1. 汇编LED原理 为什么使用Cortex-A汇编 使用汇编初始化soc外设 使用汇编初始化DDR,I.MX不需要,因为它内部的96k ROM中存放了自己编写的启动代码,这些代码可以读取DDR配置信 ...

  7. c++基础知识02

    1.前置与后置区别 #include<iostream> using namespace std; int main() { //前置和后置区别 //前置递增或递减 先让变量加减1 然后进 ...

  8. Codeforces 79D - Password(状压 dp+差分转化)

    Codeforces 题目传送门 & 洛谷题目传送门 一个远古场的 *2800,在现在看来大概 *2600 左右罢( 不过我写这篇题解的原因大概是因为这题教会了我一个套路罢( 首先注意到每次翻 ...

  9. Anaconda 镜像配置

    镜像源 清华大学: https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ 北京外国语大学: https://mirrors.bfsu.edu.cn/h ...

  10. 11-String to Integer (atoi)

    字符串转整型,更新之后的leetcode题,需考虑各种情况, 测试过标准库的atoi函数,当字符串越界返回的值是错的, 而该题要求越界时的返回边界值,更加严谨. Implement atoi to c ...