vue 二级路由嵌套和二级路由高亮问题

最新推荐文章于 2025-06-13 16:20:53 发布
原创 最新推荐文章于 2025-06-13 16:20:53 发布 · 3.5k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue路由 #二级路由嵌套 #路由嵌套高亮问题

本文探讨了在Vue中实现二级路由嵌套的过程，并遇到的二级路由高亮问题。通过在app.vue中配置一级路由，在footer.vue中设置二级路由，以及在index.js中的路由配置，实现了路由结构。然而，点击二级路由时，默认二级路由的高亮无法消除。为解决此问题，尝试使用exact属性来精确匹配路由，从而确保默认路由在选择其他二级路由时能正确取消高亮。

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

第一层路由我写在app.vue里面。如图所示：
在这里插入图片描述
footer.vue：
在这里插入图片描述
二级路由是这样：
在这里插入图片描述
index.js里面的配置：
在这里插入图片描述
效果图：
在这里插入图片描述
效果出来了，又出现新的问题，就是点击二级路由的时候，默认的二级路由高亮不会去掉，如图所示：
在这里插入图片描述
在网上看到别人用exact方法，即在默认的二级路由里面加上exact，如图所示：
在这里插入图片描述

最低0.47元/天 解锁文章

200万优质内容无限畅学
浅谈vue 二级路由嵌套和二级路由高亮问题
10-14
主要介绍了浅谈vue 二级路由嵌套和二级路由高亮问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 路由嵌套高亮问题
weixin_34268579的博客
05-17 423
正常路由嵌套是没有问题的，但是如果你已经在当前主路由页面了，然后再次点击主路由就会出现页面数据空白的情况 看代码： //主路由通过v-for循环出来 <div class="list-group"> <a href="javascript:;" v-on:click="doNothing" class="list-group-item" v-if="getPa...
vue二级路由的写法，以及动态路由的匹配和获取动态参数的值
最新发布
cdcdhj的博客
06-13 792
当你点击 list/other/path 链接时，会导航到 /list/other/path，List 组件会显示 page 的值为 other/path，fullPath 的值为 /list/other/path。当你点击 list/item1 链接时，会导航到 /list/item1，List 组件会显示 page 的值为 item1，fullPath 的值为 /list/item1。如果同时定义了 /list/:page 和 /list/*page，Vue Router 会根据定义的顺序匹配路由。
vue-11-路由嵌套-参数传递-路由高亮
weixin_33775572的博客
10-07 156
1, 新建vue-router 项目 vue init webpack vue-router-test 是否创建路由: 是 2, 添加路由列表页 在 component下创建 NavList 页面 &lt;template&gt; &lt;div&gt; &lt;div class="navlist"&gt; &lt;ul&gt; &lt;li&gt;...
vue 子路由 以及处理子路由高亮bug
wangongchao的博客
01-27 268
点击主路由想让主路由显示高亮就要在底部的footer文件里 写好主路由下的子路由比如 交易模块下又三个子路由 <div class="tab-item" id="teshubox" @click="switchTo('/transaction')"> <div class="slot"></div> <div cla...
vue中实现路由高亮的两种方式
weixin_44759289的博客
11-14 733
1、当我们引入vue-router这个包时，他为我们提供了一个类叫做.router-link-active,我们可以通过设置它的样式实现高亮显示，例如: .router-link-active{ /* vue-router提供了这个类 */ color:red; font-weight: 800; fo...
vue2 中二级路由高亮问题及配置方法
12-02
实现效果图   1、项目中的图标使用的是element-ui框架中的图标，如果需要引入可以看我写的上一篇文章。 2、首先配置路由 我初始化项目的时候初始化了路由，所以打开router/index.js文件进行修改配置 router/index.js import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Game from '@/components/Game' import Bbs from '@/components/Bbs' import Me
router:点击子路由时，父级路由的active属性消失
m0_64457414的博客
10-15 731
原因：把父级路由和子级路由的路径默认path:'/'，并且router-link都添加了exact： routes:[
el-menu 绑定路由：跳转到二级路由时保持一级菜单高亮
PhoenixGuangyu的博客
05-23 1377
判断当前路由path是否包含el-menu router中的path。使用到字符串的match方法。并设置一个拥有高亮效果的类。但是这样设置有一个问题，当我们跳转到二级路由的时候，el-menu就会失去is-active类名，高亮效果也就随即消失。这里代码实现很简单，只需要使用深度选择器 找到el-menu上的is-active，修改相应的样式即可。需求：在当前菜单项进行操作时，保持一级菜单高亮。
router 二级 三级嵌套及选中高亮
sinat_41541913的博客
04-12 850
1.main.js文件下二级路由和三级路由的引入，以及如何定义他们的路径path、名称name、调用组件component、默认展示组件redirect。 路由对象数组routes中存放着所有路由的路径和组件。在这里二级路由，以children数组的形式挂在一级路由对象里面，如下所示。 三级路由也挂在二级路由对象中的children数组里面。 redirect挂在拥有二级路由的一级组件里表示，当我们打开这个一级路由时，默认展示redirect的路径值，也就是他其中一个二级路由。 import Vue f
Vue中嵌套二级路由组件缓存,路由组件缓存失败,可能是没有在在export default{}中添加name:‘路由组件名‘属性
m0_57747266的博客
06-14 520
考虑到它是二级组件，所以我先第一步缓存一级路由组件,在一级<router-view>上的keep-alive中的include包含一级组件名称。即我即在一级的keep-alive上的include中添加了对应的组件名也在二级keep-alive中添加了二级路由组件的名称都没有办法,缓存对应的二级组件。于是我给需要缓存的二级组件的父级路由组件export了对应的name设置为路由组件名称就可以了。最后我发现我的一级路由组件和二级路由组件都没有export组件的name,直接使用二级组件的路由名称没用。
vue 路由嵌套高亮问题的解决方法
08-27
主要介绍了vue 路由嵌套高亮问题的解决方法，主路由通过v-for循环出来，次路由通过url拼接的方式导航到子路由页面，具体实现代码大家参考下本
vue-router二级导航切换路由及高亮显示的实现方法
12-09
这里以网易云音乐作为示例，效果图： 我们先一层一层写导航 先设计第一层 1.设计导航页面样式 第一个导航页面为Discover Discover.vue： <!-- --> <template> <div> 发现 </div> </template> [removed] export default { name: "discover", data() { return { }; } }; [removed] <style scoped> </style> 第二个导航页面为Mymusic 其余代码一样，注意要把name改为相应路由 name: "mymusic" 2
vue二级路由配置
热门推荐
CCKing7的博客
01-11 1万+
1.在一级路由的基础上加上 children配置 redirect：路由重定向(也就是默认显示哪个页面) 2.结合vue的rout-link标签实现跳转 to="/父路由/子路由" 3.点击过之后路由会自动添加一个类名(并且是切换状态的) 类名：.router-link-active 结合路由重定向( redirect)实现点击切换字体颜色，背景等状态。
【开发小记】elementUI面包屑跳到二级路由仍然保持父级导航栏高亮
GUANYX的博客
09-08 1083
刚进入页面的时候一直处于加载模式，因为我在子组件没有加载出来的时候会展示加载动画，所以这个问题要解决，就要保证进入父级组件的时候要主动展示一个子组件的内容。我直接在router文件里做了修改。重点在画圈圈的地方。因为我用的是elementUI组件库，所以其实是让el-menu中的:default-active能监听到父级组件就行了，改下图画线部分即可。数据是我自己用node返回的虚拟数据，啊哈哈哈哈哈，占个位。二级路由点亮了，但是导航栏上父级导航栏却不高亮了。
vue父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失
weixin_34365417的博客
08-17 2414
在实际开发中，嵌套路由经常会用到，基本用法也很简单，今天遇到了当前路由下（父路由）在点击它的子路由时，他的（父路由）选中状态消失了 原因是： 1.子路由router-link加了exac精确匹配路由 2.在写路由的时候，父子路由没有严格按照一级/二级来写 嵌套路由中默认选中第一个子路由   { path: '/dec', // 设备中心，主路由 ...
vuejs路由嵌套、设置高亮、传参
qq_25635139的博客
03-03 450
目录结构 路由配置： 注意：redirect:设置进入栏目时默认显示页面 父页面注意添加:&lt;router-view&gt;&lt;/router-view&gt; ---------------------------------------------------------------------------------------------------------...
vue 一级路由二级路由 父子路由高亮
爱睡的虫虫
04-26 1488
一级路由 <template> <div id="app"> <div> <router-link to="/Home">Home</router-link>| <router-link to="/about">About</router-link> </div&g...
vue怎么嵌套多级路由页面打不开_浅谈vue 二级路由嵌套和二级路由高亮问题
weixin_42498249的博客
01-15 561
第一层路由我写在app.vue里面。如图所示：footer.vue：二级路由是这样：index.js里面的配置：效果图：效果出来了，又出现新的问题，就是点击二级路由的时候，默认的二级路由高亮不会去掉，如图所示：在网上看到别人用exact方法，即在默认的二级路由里面加上exact，如图所示：补充知识：vue - 子路由-路由嵌套描述：子路由，也叫路由嵌套，采用在children后跟路由数组来实现，数...
vue 父子路由的实现以及父子路由的高亮切换显示问题
深海如梦的博客
07-11 2233
聊聊关于vue 父子路由的实现和父子路由的高亮切换显示问题解决。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值