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

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

#php #vue.js

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

需求是这样的：

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

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

 解决：

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

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

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

付费解决前端问题：

vue-router实现原理、理论知识和实践详情
大模型大数据攻城狮的专栏
07-04 736
这一章咱们将深入Vue Router的源码（基于4.x版本），剖析它的核心实现逻辑，从路由初始化到导航流程，再到组件渲染。别担心，我会用通俗的语言带你啃这块硬骨头，配上代码片段和注释，让你既能看懂源码，又能把思路用到自己的项目里！不过，它实现起来比Hash模式复杂点，咱们来一探究竟。比如，路由规则/user/:id会被转成正则^/user/([^/]+)，其中[^/]+匹配任意非斜杠字符，提取为参数id。Vue Router的核心任务是监听URL变化，然后根据配置的路由规则，动态渲染对应的组件。
【Vue】高级系列（九）路由 - vue-router - SPA - 基本路由 - 嵌套路由 - 编程式路由导航
YK菌的博客
02-25 3224
学习Vue-router
【工作常用】VUE页内路由
weixin_41687289的博客
11-14 579
我们经常会有种需求是，左侧边栏是不变的，在右边实现组件更新。 咋做的呢？？难不成写很多冗余的页面，都包含同样的侧边栏，然后跳转过去之后再考虑状态问题？ 这也太蠢了。而且跳转过去之后考虑状态问题太蛋疼了。那么我们要怎么办？？？ 可以用嵌套路由。 首先贴大神博客。 既然都说了是嵌套路由，那么我们大概有了想法了： ① 为了演示，我们现在view文件夹下新建一个title1.vue和title2.vue用...
vue-router如何定义嵌套路由？
weixin_57550930的博客
09-26 438
大家都知道选项卡，在选项卡中，顶部有数个导航栏，中间的主体显示的是内容；这个时候，整个页面 是一个路由，然后点击选项卡切换不同的路由来展示不同的内容，这个时候就是路由中嵌套路由。 在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 ① 为了演示，我们现在view文件夹下新建一个title1.vue和title2.vue用来存放不同的内容 ② 现在我们在router 》 inde
Vue嵌套（多级）路由
最新发布
m0_61787196的博客
06-11 1247
Vue嵌套（多级）路由
使用router-link-active和exact动态切换路由样式
weixin_30735745的博客
05-08 556
每个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 811
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 2496
基础的router-link的使用< router - link to = "/" > 待办事项 < / router - link > < router - link to = "/compelete" > 完成 < / router - link > < router - link to = "/delete" > 已删除 < / router - link >
Vue基础知识总结 11：前端路由vue-router
2501_90252551的博客
01-18 1173
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
Vue-cli4——vue-router路由
zyugat的博客
11-18 4786
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
vue-router二级导航切换路由及高亮显示的实现方法
10-16
Vue Router是官方推荐的路由库，它允许我们定义动态和嵌套路由，实现导航和页面间的平滑过渡。本篇文章将深入探讨如何在Vue Router中实现二级导航的切换路由以及高亮显示。 首先，我们要创建两个主要的导航页面，...
router-link中点击事件失效
qq_40239859的博客
06-21 853
可以在click后面加上native，即把@click变成@click.native，点击事件又重新生效了。
解决vue-router-active无效问题
黑猫几绛的博客
05-24 2556
解决vue-router active-class无效问题 在自制tabBar中遇到了这些问题： （1）设置的样式中，path为'/'的icon始终被设置了active样式 解决办法: 由于router-link to的每个路由首部都存在'/'，因此都可以激活默认路由'/'，这也是为什么当path为'/'的时候始终有active样式，甚至出现了当点击其他tab按键时，出现了两个active样式。 在<router-linkto="/" >加上exact 属性 表示只有在地址为 /...
Vue Router active-class 属性
lio-zero 的博客
05-22 2411
active-class 是 vue-router 模块的 router-link 组件的属性，当 router-link 标签被点击时将会应用这个样式。 有两种使用方式： 直接在路由 Router 构造函数中配置 linkActiveClass 属性 export default new Router({ linkActiveClass: 'active', }) 使用这种方式，会在每个...
router-view、router-link属性、动态路由的使用、路由嵌套、路由传参
qq_46302247的博客
06-01 6456
router-link是一个全局组件，可以在任何一个vue组件中使用router-view可以理解为一个占位符，用来给 当前url映射的组件 占位的，当前url映射的组件 会替换掉动态路由：路由中的path是动态的，根据传参来显示对应的页面 注意： this.router指的是constrouter=newVueRouter()中的router，代表整个router；this.router 指的是 const router = new VueRouter() 中的router ，代表整个router；
router:点击子路由时，父级路由的active属性消失
m0_64457414的博客
10-15 731
原因：把父级路由和子级路由的路径默认path:'/'，并且router-link都添加了exact： routes:[
vue中＜router-view＞使用详解
weixin_45266691的博客
01-09 9575
是 Vue Router 提供的一个用于动态显示匹配到的组件内容的组件。在单页面应用中，页面的切换是通过路由的变化来实现的，而。属性，从而支持命名视图，这在同时展示多个视图的情况下很有用。可以嵌套使用，以支持嵌套路由的场景。是实现动态路由渲染的核心组件，通过合理配置路由和使用。标签，它会根据当前路由的匹配情况动态渲染对应的组件。在上述例子中，路由切换时会产生淡入淡出的过渡效果。负责根据当前路由匹配到的组件渲染相应的内容。标签，每个标签对应一个具体的嵌套路由。在路由配置中，对应的路由定义也需要添加。
路由(router-link和router-view)
weixin_44472894的博客
01-19 1785
- 为了避免刷新页面，vue-router实际上为它添加了点击事件，并阻止了默认行为，在事件内部使用hitory api更改路径 -->-- 向to属性传递路由信息对象 RouterLink会根据你传递的信息以及路由配置生成对应的路径 -->-- vue-router 匹配到的组件会渲染到这里 -->// 当匹配到路径 /foo 时，渲染 Foo 组件。// 当匹配到路径 /bar 时，渲染 Bar 组件。// 当匹配到路径 /foo 时，渲染 Foo 组件。-- mode:history 生成 -->
Vue-Router深度解析：打造你的前端路由系统
"Vue-Router是Vue.js官方提供的路由管理器，用于构建单页面应用...Vue Router还提供了许多高级特性，如命名路由、动态路由匹配、导航守卫、嵌套路由等，这些功能使得在构建复杂的SPA时，路由管理变得更为便捷和可控。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值