在vue3中使用router-link-active遇到的坑
在使用 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遇到的坑的更多相关文章
- Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务
前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...
- 解决vue-router中this.$router.push无法在新窗口中打开
解决vue-router中this.$router.push无法在新窗口中打开 let routeData = this.$router.resolve({ path: '/consult', que ...
- 全面解析JavaScript的Backbone.js框架中的Router路由
这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...
- vue中的router和route有什么区别?
我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...
- vue3中使用axios如何去请求数据
在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...
- vue3中watch函数
watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newV ...
- 端午总结Vue3中computed和watch的使用
1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...
- vue 3 学习笔记 (七)——vue3 中 computed 新用法
vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...
- Vue中this.$router.push(参数) 实现页面跳转
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...
随机推荐
- Flume面试题整理
1.Flume使用场景(☆☆☆☆☆) 线上数据一般主要是落地(存储到磁盘)或者通过socket传输给另外一个系统,这种情况下,你很难推动线上应用或服务去修改接口,实现直接向kafka里写数据,这时候你 ...
- 暑假算法练习Day2
第二天啦!大家一起冲冲冲!! 1004 成绩排名 (20 分) 读入 n(>0)名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式: 每个测试输入包含 1 个测试用 ...
- .Net Core微服务——Ocelot(3):超时、熔断、限流
基本概念 超时.熔断.限流听起来好像很远,但实际上用在方方面面.很多人可能还搞不懂熔断是做什么,其实可以把熔断理解为一种防护措施.做个假设,在微服务体系下,某个下游服务响应很慢,然后随着时间推移,会有 ...
- 微信小程序(十)
时间机制- 响应用户交互 时间绑定 冒泡事件与非冒泡事件 bindtap 绑定 VS catchtap 绑定 button 不会阻止bindtap 向上冒泡,而如果是 catchtap 就会阻止向上冒 ...
- [luogu5361]热闹的聚会与尴尬的聚会
由于两者是独立的,我们希望两者的$p$和$q$都最大 考虑最大的$p$,先全部邀请,此时要增大$p$显然必须要删去当前度数最小的点,不断删除之后将每一次度数最小值对答案取max即可 对于$q$也即最大 ...
- [hdu6761]Minimun Index
$lyndon\ word$(以下简写为Lw):对于一个字符串s,其为Lw当且仅当其的最小后缀为自身 性质:若$u<v$为LW,那么$uv$也为Lw(反证法即可证) $lyndon$分解:将一个 ...
- 【TcaplusDB知识库】如何部署TcaplusDB Local 版
[TcaplusDB知识库]部署TcaplusDB Local 版的准备操作 1. 版本介绍 TcaplusDB Local版,是为用户提供的一个满足本地开发调试的版本(基于Docker部署的可下载版 ...
- k8s-Pod污点与容忍
目录 Pod污点与容忍 大白话先解释一下污点与容忍 为什么要用污点和容忍? 官方解释 Taints参数 标记污点 容忍污点 取消所有节点污点 Pod污点与容忍 大白话先解释一下污点与容忍 污点:被打上 ...
- 多线程02.继承Thread类
package chapter2; /** * 1.使用static虽然完成了当前的功能. * 但是static的生命周期比较长,需要在所有线程执行完成后才会结束. * 还有号没有按照顺序进行打印 * ...
- Pycharm整体缩进和减少缩进
整体缩进:鼠标拉选住代码块,按下tab键. 反向缩进:鼠标拉选住代码块,按下shift+tab键.