为什么我点击子路由会把父路由的内容显示

qq_42836877 2021-02-04 11:18:45

...全文

623 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

HuangHe201691 2021-02-05

打赏
举报

回复

目测应该是点击事件的作用区域没理清除

sha虫剂 2021-02-05

打赏
举报

回复

不上代码怎么看......

汇品铺子 2021-02-05

打赏
举报

回复

上代码

本文讲述了在Vue项目中，如何处理当父路由不需要内容但仍需切换子路由时，避免显示父级组件的问题。关键在于为父路由绑定一个空的`router-view`，并通过`render`属性渲染标签。

在Vue开发中遇到一个问题，即点击子路由时父路由的选中状态消失。原因在于子路由的router-link使用了exact属性导致精确匹配，使得父路由无法保持选中。解决方案是移除router-link上的exact属性，以确保在子路由激活时，父路由依然显示选中状态。

本文围绕Vue Router展开，介绍了如何定义父级路由及设置默认选中的子路由。通过使用全局导航守卫保持父路由高亮不消失，还说明了利用路由属性和CSS样式实现父路由激活状态的方法，以及配置组件属性保持组件状态、实现父路由默认选中和子路由切换时高亮的步骤。

本文以leyou商城前端为例，详细介绍了Vue项目的路由配置过程。包括如何通过父路由加载基础界面结构，以及如何设置子路由来响应用户的导航操作，展示不同内容。

在Vue应用中，当路由包含子路由时，父路由菜单无法正常高亮。问题在于默认激活的菜单项是根据$route.path设置的，而实际路径变成了子路由的路径。解决方法包括：1) 在子路由的meta属性中设置需要高亮的父路由地址，并在计算属性中返回；2) 直接在计算属性中判断$route.path是否以父路由开始，若是则返回父路由地址。这两种方案都能确保正确高亮显示菜单项。

87,988

社区成员

224,683

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章