在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 后面可以是对象,也可以是字符串 ...
随机推荐
- 记录线上APP一个排序比较引发的崩溃 Comparison method violates its general contract!
最近在做产品需求的时候上线了一个新的产品需求,给用户多了一种新的排序排序规则,更加方便用户找到自己想要的东西.新版本发布后,QA 给我发了一个 线上崩溃 bug 链接,具体内容如下: 看到上面的链接, ...
- [bzoj4945]游戏
暴力枚举$2^{d}$表示这d个点中一定不选A或一定不选B(那么就包含了所有情况),然后就对原图跑2-sat即可注意一个细节,如果某一条限制中初始点不合法,就不用管了:如果最终点不合法,那么相当于初始 ...
- 第02章_MySQL环境搭建
第02章_MySQL环境搭建 1. MySQL的卸载 步骤1:停止MySQL服务 在卸载之前,先停止MySQL8.0的服务.按键盘上的"Ctrl + Alt + Delete"组合 ...
- Dapr初体验之服务调用
初次理解服务调用 在微服务中,有一个难点就是:如果你想使用各个服务组件,你就得知道不同服务的地址和端口,也就是服务发现. 在传统应用我们是怎么做的?就是在web项目里配置上api地址,如下: 在一个w ...
- SSM整合小项目
1.文件目录结构 2.MyBatis配置 创建数据库环境 CREATE DATABASE `ssmbuild`; USE `ssmbuild`; DROP TABLE IF EXISTS `books ...
- PaintHouse II
// // Created by Administrator on 2021/7/27. // #ifndef C__TEST01_PAINTHOUSE_HPP #define C__TEST01_P ...
- IPv4 寻址方式简介
IPv4 支持三种不同类型的寻址模式.单播寻址方式.广播寻址方式和组播寻址方式.本章节我们来介绍这些寻址方式. 单播寻址方式 在这种模式下,数据只发送到一个目标主机.Destination Addre ...
- 详解如何用 CSS3 完成 3D transform变换
Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换 有一定的了解 其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...
- Parallel NetCDF 简介
Parallel NetCDF API 所有C接口前加ncmpi前缀,Fortran接口前加nfmpi前缀 函数返回整数 NetCDF 状态变量 1. Variable and Parameter T ...
- 8核cpu,,负载
今天有一个电话面试,面试官问我:CentOS怎么查看CPU负载?我说:看top的第一行有load average.面试官又问:为什么从这就判定是负载高呢?依据是什么呢?然后... 然后我就尴尬了,挂了 ...