在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 后面可以是对象,也可以是字符串 ...
随机推荐
- 【JAVA】笔记(5)--- final;抽象方法;抽象类;接口;解析继承,关联,与实现;
final: 1.理解:凡是final修饰的东西都具有了不变的特性: 2.修饰对象: 1)final+类--->类无法被继承: 2)final+方法--->方法无法被覆盖: 3)final ...
- 大爽Python入门教程 1-5 答案
大爽Python入门公开课教案 点击查看教程总目录 1 方向变换 >>> 51//4 12 >>> 51%4 3 答: 向左转51次之后, 小明面朝东方, 转过了1 ...
- Python 练习 进程
... """ 创建2个进程, 每一个进程都打出当前的时间和进程的标识,持续打十次. """ import multiprocessing ...
- [cf1427E]Xum
假设$x$的最高位为$2^{t}$(即$2^{t}\le x<2^{t+1}$),并构造出$y=2^{t}x\oplus x$,不难发现两者仅在第$t$位上均为1,那么根据异或的性质可得$y=( ...
- [luogu3781]切树游戏
考虑暴力的dp,即用$f_{i,j}$表示以$i$为根的子树内,强制$i$必须选且异或为$j$的方案数,转移用FWT即可,求出该dp数组的时间复杂度为$o(nm\log_{2}m)$ 由于是全局的方案 ...
- [atAGC046E]Permutation Cover
每一个点都在一个排列中等价于所有排列覆盖所有位置 有解当且仅当满足$a_{y}\le 2a_{x}$(其中$a_{x}$为$a_{i}$的最小值,$a_{y}$为$a_{i}$的最大值) 证明:贪心选 ...
- [bzoj1415]聪聪与可可
直接求出任意两点的距离后记忆化搜索,用f[i][j]表示聪聪在i,可可在j的期望步数,由于i和j的最短路单调递减,所以搜不到环 1 #include<bits/stdc++.h> 2 us ...
- [bzoj1572]工作安排
按照Di排序,从小到大枚举物品,考虑如果直接能选就选上,不能选就考虑替换之前价值最小的来选(显然一定是可行的,只需要在原来选价值最小的时候选这个就行了),这个东西用堆来维护即可 1 #include& ...
- 小程序嵌套H5的方式和技巧(一)
文章内多次使用了关键字"壳",首先先解释一下什么是壳 壳: 小程序由原生的web-view组件形成的页面,页面只包含技术逻辑(如打开H5页面),不包含具体业务接口请求和业务逻辑处理 ...
- CF611F New Year and Cleaning
题意 CF611F New Year and Cleaning 想法 这个题是\(NOIP2020\)的弱化版.. 我们把所有在二维上的点都一起考虑,那么所有点对于一个步骤的移动是相当于这些所有点所组 ...