vue 一级路由二级路由 父子路由高亮

最新推荐文章于 2025-05-17 11:14:41 发布
最新推荐文章于 2025-05-17 11:14:41 发布
阅读量1.4k 收藏 2
点赞数 3
CC 4.0 BY-SA版权
分类专栏： VUE 文章标签： 路由 高亮 路由高亮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feifanzhuli/article/details/105780245
本文介绍了如何在Vue应用中实现一级路由和二级路由的导航高亮效果，详细讲解了路由表的配置以及父子路由的管理，旨在帮助开发者优化用户体验。

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

为祖国的复兴而读书

一级路由
<template>
  <div id="app">
    <div>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue第四天（父子组件间通信 ref 获取 DOM 元素和组件 路由）
周琛的点滴记录~
04-18 4791
Vue第四天 父子组件间通信 ref 获取 DOM 元素 和 组件 路由 父组件向子组件传值 1.子组件使用父组件中的数据 初步尝试—（错误分析） 正确使用方法 <div id="app"> <!--父组件,可以在引用子组件的时候，通过 属性绑定（v-bind：） 的形式，把需要 传递给子组件 的数据，以属性绑定的形式，传递到子组件内部，供子组件使用--&g...
vue 子路由 以及处理子路由高亮bug
wangongchao的博客
01-27 263
点击主路由想让主路由显示高亮就要在底部的footer文件里 写好主路由下的子路由比如 交易模块下又三个子路由 <div class="tab-item" id="teshubox" @click="switchTo('/transaction')"> <div class="slot"></div> <div cla...
router 实现一级菜单，二级菜单不在同一个界面，但是实现同时高亮
bu_xiang_tutou的博客
06-01 639
切换第二个界面，第一个界面的侧边菜单也会高亮。这里是给大家提供一个思路，我的代码直接使用可能会出问题，只要是看。我使用的方法，在切换中间界面路由的时候，修改第一个界面指定menu的path。两个界面的default-active都是当前路由。
想要点击子路由(添加商品页面)时，在菜单导航栏里对应的父级(商品列表)位置，显示高亮
weixin_49651585的博客
12-13 478
想要点击子路由(添加商品页面)时，在菜单导航栏里对应的父级(商品列表)位置，显示高亮， 在路由中添加meta，和对路由监听
vue配置子路由，实现点击左侧菜单，内容区域显示不同的内容
最新发布
运维@小兵的博客
05-17 277
vue配置子路由，实现点击左侧菜单，内容区域显示不同的内容
vue怎么嵌套多级路由页面打不开_浅谈vue 二级路由嵌套和二级路由高亮问题
weixin_42498249的博客
01-15 560
第一层路由我写在app.vue里面。如图所示：footer.vue：二级路由是这样：index.js里面的配置：效果图：效果出来了，又出现新的问题，就是点击二级路由的时候，默认的二级路由高亮不会去掉，如图所示：在网上看到别人用exact方法，即在默认的二级路由里面加上exact，如图所示：补充知识：vue - 子路由-路由嵌套描述：子路由，也叫路由嵌套，采用在children后跟路由数组来实现，数...
iveiw-admin子级路由跳转实现父级保持高亮选中
weixin_41538490的博客
04-29 1355
管理端很多时候需要做三级路由跳转，这些路由的父级实在左边菜单展示，而子级路由则没有在左侧菜单展示，在跳转到子级路由时，父级仍需保持高亮选中效果，废话不多刷，上代码。 ps:当时为了解决这个问题费了老大劲，百度，群里问都没有好的解决办法，还是自己慢慢摸索出来了，希望能为遇到这种问题的同学提供帮助。 提示：首先理解菜单是如何高亮选中的，iview的Menu组件是根据name值来高亮选中，所以我们只要动...
Vue router路由
qq_36582776的博客
11-18 1110
5.命名路由 例如像三级目录 ，每次写都需要带上一二级目录，比较麻烦，采用命名路由可以用name直接找到 6.路由的params参数 1）在配置路由的时候需要先声明接收params参数，即先占位 2） router-link的replace属性，在开启的时候，此次路由跳转会覆盖上次的路由历史记录。 缓存路由组件，写在include 中的组件才不会在切换的时候被销毁。不写inclu...
vue路由改变侧边栏高亮改变
12-23
在Vue.js中，当路由发生变化时，通常会涉及到导航守卫（Guards）以及组件间的通信，以便实现在侧边栏自动更新高亮显示的功能。你可以通过以下步骤实现： 1. **设置全局守卫**：在`router.beforeEach`或`router....
Vue路由（vue-router）03（子路由）
heyuqing32的博客
12-15 706
对于单页面的vue应用，子路由的配置可能是必不可少的，其实vue的子路由配置很简单。这篇文章是基于上一片文章（路由配置02）的。 示例需求，早footer.vue模块中配置子路由（示例文件footer01.vue和footer02.vue）。 1. 在components文件夹下新建一个children文件夹，在其中新件子路由文件。（children文件夹名称不限制，子路由文件的位置不限制，可...
vue-router二级导航切换路由及高亮显示的实现方法
10-16
主要给大家介绍了关于vue-router二级导航切换路由及高亮显示的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue2.0vue路由 嵌套(多级)路由
yasinawolaopo的博客
01-07 3339
Vue2.0 Vue路由的嵌套与注意事项
若依框架在二次开发基础上，权限路由默认首页问题
Arieslx的博客
11-02 2253
若依框架默认获取首页
Vue----路由高亮 & 命名路由
emmmm.....
04-30 2386
文章目录3.6 路由高亮3.6.1 默认的高亮 class 类3.6.2 自定义路由高亮的 class 类3.7 命名路由3.7.1 使用命名路由实现声明式导航3.7.2 使用命名路由实现编程式导航 3.6 路由高亮 Vue3 可以通过如下的两种方式，将激活的路由链接进行高亮显示： ① 使用默认的高亮 class 类 ② 自定义路由高亮的 class 类 3.6.1 默认的高亮 class 类 被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名
router 二级 三级嵌套及选中高亮
sinat_41541913的博客
04-12 845
1.main.js文件下二级路由和三级路由的引入，以及如何定义他们的路径path、名称name、调用组件component、默认展示组件redirect。 路由对象数组routes中存放着所有路由的路径和组件。在这里二级路由，以children数组的形式挂在一级路由对象里面，如下所示。 三级路由也挂在二级路由对象中的children数组里面。 redirect挂在拥有二级路由的一级组件里表示，当我们打开这个一级路由时，默认展示redirect的路径值，也就是他其中一个二级路由。 import Vue f
Vue Router父路由与子路由问题
刘一帆的博客
03-08 570
其次：要直接通过父路由访问子路由，需要在父页面加入，完美解决。首先：子路由不需要/
解决vue3父子路由通信问题
xuliqi666的博客
09-09 1734
在vue2中我们知道，父子路由通信其实就是父子组件之间的通信，但是在vue3中有一些小差别，父路由通过ref链去获取子路由的响应式数据和方法是获取不到的，此文章主要解决此问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值