vue-router 嵌套路由，router-link-active的问题

最新推荐文章于 2025-10-05 11:12:57 发布
原创 最新推荐文章于 2025-10-05 11:12:57 发布 · 1.1w 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#php #vue.js

本文探讨了在使用Vue.js进行多级路由开发时遇到的样式管理问题，具体为底部导航在点击二级路由时丢失激活状态的问题及解决方案。

最近做一个vue的项目，是多级路由组成的项目，

需求是这样的：

圈起来这个样式是由路由构造提供的linkActiveClass="active" 的属性做的，就是点击底部导航任一个，就会自动添加active，

底部样式已经成功，但我做二级路由的时候，我再点二级路由导航，发现底部导航样式去掉。

 解决：

路由本来是这样的，只要去二级path属性“/”即可 变成这样

之后再在相应的导航页面再设置 active的样式,

  ================================================

付费解决前端问题：

vue-router实现原理、理论知识和实践详情
大模型大数据攻城狮的专栏
07-04 957
这一章咱们将深入Vue Router的源码（基于4.x版本），剖析它的核心实现逻辑，从路由初始化到导航流程，再到组件渲染。别担心，我会用通俗的语言带你啃这块硬骨头，配上代码片段和注释，让你既能看懂源码，又能把思路用到自己的项目里！不过，它实现起来比Hash模式复杂点，咱们来一探究竟。比如，路由规则/user/:id会被转成正则^/user/([^/]+)，其中[^/]+匹配任意非斜杠字符，提取为参数id。Vue Router的核心任务是监听URL变化，然后根据配置的路由规则，动态渲染对应的组件。
Vue基础知识总结 11：前端路由vue-router
2501_90252551的博客
01-18 1283
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
【工作常用】VUE页内路由
weixin_41687289的博客
11-14 679
我们经常会有种需求是，左侧边栏是不变的，在右边实现组件更新。 咋做的呢？？难不成写很多冗余的页面，都包含同样的侧边栏，然后跳转过去之后再考虑状态问题？ 这也太蠢了。而且跳转过去之后考虑状态问题太蛋疼了。那么我们要怎么办？？？ 可以用嵌套路由。 首先贴大神博客。 既然都说了是嵌套路由，那么我们大概有了想法了： ① 为了演示，我们现在view文件夹下新建一个title1.vue和title2.vue用...
vue-router如何定义嵌套路由？
weixin_57550930的博客
09-26 447
大家都知道选项卡，在选项卡中，顶部有数个导航栏，中间的主体显示的是内容；这个时候，整个页面 是一个路由，然后点击选项卡切换不同的路由来展示不同的内容，这个时候就是路由中嵌套路由。 在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 ① 为了演示，我们现在view文件夹下新建一个title1.vue和title2.vue用来存放不同的内容 ② 现在我们在router 》 inde
Vue.js中active-class的妙用与实战
最新发布
Raising___的博客
10-05 1177
在非路由场景（如选项卡、自定义菜单）中，需结合 Vue 的动态类绑定语法:class）手动实现。此时 “激活条件” 由开发者自定义（如基于data中的变量）。在自定义交互（如选项卡）中，若通过索引（index）判断激活状态，需确保v-for的key与索引绑定逻辑一致，避免因数据更新导致索引错乱。反例：若menuList是动态获取的数组，且可能被删除 / 排序，使用index作为key会导致激活状态错位：vue-- 风险：menuList 排序后，index 变化，激活状态错误 --><div。
使用router-link-active和exact动态切换路由样式
weixin_30735745的博客
05-08 566
每个router-link标签被点击时都有一个router-link-active的类，设置这个类的样式，就可以在vue里实现类的动态切换，在每个router-link标签里，都要加上exact这个属性，才能正常切换。 例子： <template> <div> <!-- 每个router-link标签里都要加上exact属性 --> ...
Vue基础知识：声明式导航---导航链接router-link，router-link是什么，怎么用？router-link-active和router-link-exact-active的区别
我就知道你会来，我们一起进步吧！
04-04 912
to="/find" 可以许多路由,比如：/find /find/home /find/foods .....以/find开头都会添加。vue-router提供的一个全局组件，router-link(用于取代a标签)1.router-link-active 模糊匹配（应用比较多）2.router-link-exact-active 精准匹配。router-link-exact-active 精准匹配。router-link-active 模糊匹配。
vue3 router-link 自定义高亮（ isActive isExactActive ）问题
qq_39549013的博客
08-16 2562
基础的router-link的使用< router - link to = "/" > 待办事项 < / router - link > < router - link to = "/compelete" > 完成 < / router - link > < router - link to = "/delete" > 已删除 < / router - link >
《Vue入门到精通系列之五》--- vue-router详解_vue-router beforeeach和aftereach
2401_85158697的博客
07-12 934
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。
【Vue】高级系列（九）路由 - vue-router - SPA - 基本路由 - 嵌套路由 - 编程式路由导航
YK菌的博客
02-25 3305
学习Vue-router
Vue-cli4——vue-router路由
zyugat的博客
11-18 4818
Vue-cli4——vue-router路由（一） Day1 文章目录Vue-cli4——vue-router路由（一）前言一、代码解析1.1 src/router/index.js1.2 src/App.vue二、实例2.1 简单的实例2.2 在网页中不显示#号2.3 重定向2.4 router-link2.5 通过代码跳转2.6 路由懒加载三、嵌套与数据传递3.1 嵌套3.2 动态路由传递数据，params3.3 参数传递，query3.4 参数传递案例，params与query3.5 router
router-link中点击事件失效
qq_40239859的博客
06-21 864
可以在click后面加上native，即把@click变成@click.native，点击事件又重新生效了。
解决vue-router-active无效问题
黑猫几绛的博客
05-24 2618
解决vue-router active-class无效问题 在自制tabBar中遇到了这些问题： （1）设置的样式中，path为'/'的icon始终被设置了active样式 解决办法: 由于router-link to的每个路由首部都存在'/'，因此都可以激活默认路由'/'，这也是为什么当path为'/'的时候始终有active样式，甚至出现了当点击其他tab按键时，出现了两个active样式。 在<router-linkto="/" >加上exact 属性 表示只有在地址为 /...
Vue Router的基本使用、router-link以及router-link-active
热门推荐
drhnb的博客
07-10 1万+
在Vue中，可以使用Vue Router来实现路由功能。Vue Router是Vue.js官方提供的一个插件，用于实现前端的路由管理。 使用Vue Router可以将不同的页面映射到对应的URL路径，并通过URL的变化在不刷新页面的情况下展示不同的内容。这样可以实现单页应用（SPA）的效果，让用户在页面之间进行无刷新的导航操作。
vue 中router-link属性设置(1)
2301_79099606的博客
04-13 788
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取。
vue 中router-link属性设置(2)
qinglp的博客
04-08 1215
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。[外链图片转存中…(img-9OQn8ihO-1712507102011)][外链图片转存中…(img-ll4oNxPW-1712507102011)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。
Vue默认路由的router-link-active类使用注意点
最是人间留不住，朱颜辞镜花辞树。
03-25 2809
琢磨了好久的问题，终于解决了，泪目( Ĭ ^ Ĭ )
Vue Router API总结（6）
Mybells
09-12 839
1.守卫分类 全局守卫： router.beforeEach((to, from, next) => { /* 必须调用 `next` */ }) router.beforeResolve((to, from, next) => { /* 必须调用 `next` */ }) router.afterEach((to, from) => {}) 路由配置中的守卫： c...
router-link-active 的巧妙使用
qq_38992657的博客
10-09 5814
非常好用，直接贴代码，加深自己的印象！
Vue-Router深度解析：打造你的前端路由系统
"Vue-Router是Vue.js官方提供的路由管理器，用于构建单页面应用...Vue Router还提供了许多高级特性，如命名路由、动态路由匹配、导航守卫、嵌套路由等，这些功能使得在构建复杂的SPA时，路由管理变得更为便捷和可控。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值