在使用 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. HTTPS-自己生成数字证书

    一.获取证书的途径 自签名证书,适用于开发者测试HTTPS,最快速的途径就是生成自签名证书,非常方便. Let's Encrypt证书,可以使用免费CA机构签发的证书. 使用收费CA机构签发的证书,如 ...

  2. 配置Google支付相关参数(client_id, client_secret, refresh_token)

    1. 登陆Google开发者账号,点击左边API权限 Google控制台 创建新项目 转到 Google Play 管理中心的 API 权限页面. 接受<服务条款>. 点击创建新项目. 系 ...

  3. updatexml和extractvalue函数报错注入

    updatexml()函数报错注入 updatexml (XML_document, XPath_string, new_value); 第一个参数:XML_document是String格式,为XM ...

  4. Python 匿名函数用法和return语句

    匿名函数用法1.什么是匿名函数    函数定义过程中,没有给定名称函数,python中用lambda表达式创建匿名函数    lambda只是一个表达式,函数体比def简单    lambda主题是一 ...

  5. Node常用内置模块

    node内置的fs模块就是文件系统模块,负责读写文件 fs同时提供了同步异步的方法 'use strict'; var fs = require('fs'); fs.readFile('test.tx ...

  6. 算法学习->整数拆分问题

    动态规划典型题目/ 00 题目 将正整数n无需拆分为最大数为k的拆分方案有多少种?​要求所有的拆分方案不重复. 示例: 输入:n=5,k=5 输出:(5,5)=7 示例分析: 5=5 5=4+1 5= ...

  7. Netcat基础使用

    netcat命令选项 本文参考文章链接 本文参考文章链接1 本文参考文章链接2 本文参考文章链接3 常用命令选项 ## 网络模式和代理相关 -l 监听,作服务器.不填时作客户端. -u UDP模式.不 ...

  8. [spojDIVCNT1]Counting Divisors

    定义 约定1:以下分数都是最简,且令$\frac{1}{0}$有意义,其大于其余分数,并称平行于$y$轴的直线斜率为$-\frac{1}{0}$ 分数加:对于分数$a=\frac{a_{1}}{a_{ ...

  9. [bzoj1188]分裂游戏

    容易发现所有豆子相互独立,只需要考虑每一个豆子的sg函数并异或起来即可,sg函数从后往前暴力即可 1 #include<bits/stdc++.h> 2 using namespace s ...

  10. 7.3 自定义镜像-运行nginx与tomcat并结合PV/PVC/NFS以实现动静分离示例

    1.在NFS SERVER上为tomcat.nginx创建相关目录 NFS SERVER的部署配置参考:https://www.cnblogs.com/yanql/p/15410308.html 1. ...