vue路由(router)设置:父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
本文知识点比较简单,主要面向新人解惑,vue前辈请忽略。
我们需要实现的效果,父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失,见下图:
在实际开发中,可能遇到了当前路由下(父路由)在点击它的子路由时,他的(父路由)选中状态消失了
原因:
1、子路由router-link加了exac精确匹配路由
2、在写路由的时候,父子路由没有严格按照一级/二级来写
知识点
router-link 作为 vue 中的路由跳转标签,它内置有一个选中的状态,当处于当前路由时,会给 router-link 加一个 router-active-class,即选中状态的 class,同时还提供有一个 exact 属性,当加了 exact 属性的时候表示精确匹配,也就是会精确匹配 Url,所以如果给主路由设置了 exact 属性的话,当处于子路由时,Url 就匹配不到主路由了,那么主路由也就不会处于选中状态。 如果想了解更多,请阅读:《vue路由(router)关于linkExactActiveClass和linkExactActiveClass问题》
所以解决办法就是不要在主路由和子路由的 router-link 上设置 exact 属性,问题即可解决。
下面是具体配置:
组件配置:
<nav><ul class="ul"><li><router-link to="/brand"><span>汐熙·故事</span></router-link><dl class="dl"><dd><router-link to="/brand/company"><span>企业介绍</span></router-link></dd><dd><router-link to="/brand/story"><span>品牌故事</span></router-link></dd><dd><router-link to="/brand/productconcept"><span>产品理念</span></router-link></dd></dl></li>...</ul></nav>
注意:
主路由是:/brand ,子路由都要加上主路由, 且不要加"exac"
路由配置:
export default new Router({routes: [//汐熙·故事{path: "/brand", //主路由name: "brand",redirect: "/brand/company", //重定向到第一个子路由components: {...},children: [{path: "/brand/company", //加主路由name: "company",components: {...}},{path: "/brand/story", //加主路由name: "story",components: {...}}...]}]
});
注意:
主路由使用"redirect"重定向到第一个子路由,实现点击父级进入第一个子路由;
所有子路由都要加上主路由
以上内容如有错误,请各位朋友指正,谢谢。
vue路由(router)设置:父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失相关推荐
- html如何设置radio单选按钮默认选中效果
从标题看这个问题够简单,事实也是如此,不过在群里还是看到有初学者来询问这个问题,下面就展示一段代码实例,如果实现多个单选按钮实现其中的一个默认选中效果. 代码实例如下: 01 02 03 04 05 ...
- jeecgboot:主表(antd table)默认选中第一条记录
问题描述: 使用jeecgboot框架生成ERP主题的主附表样式,主表默认不选中任何记录,每次需要手动点击一条,下边的附表才能显示对应的查询记录,我们现在要做的是让主表默认选中第一条. 解决思路: 刚 ...
- [vscode] 代码提示不能默认选中第一项问题
码代码时发现一个问题,有些代码提示无法选中第一项. 如果是所有代码提示都无法选中第一项,直接百度.这里说的是另一种,部分代码无法默认选中. 在输入类似class=""这类代码的代码 ...
- VSCode 代码有的提示不能默认选中第一项问题
如果是所有代码提示都无法选中第一项,直接百度.这里说的是另一种,部分代码无法默认选中. 在输入类似class=""这类代码的代码自动补全回车后,输入代码触发代码提示后不会默认选中第 ...
- html第一个子元素选择,css选中父元素下的第一个子元素(:first-child)
前言 最近在项目中用到 :first-child 很容易的就想到了,嗯嗯.这不就是选择第一个元素吗? 好像很好用,平时使用中也没有遇到什么问题,理所当然的就以为它只会选中父元素下的第一个元素,对孙元素 ...
- 为线程设置一个名字 [mythread setName:@第一个子线程];
为线程设置一个名字 [mythread setName:@"第一个子线程"];
- html设置默认选中状态,html中select标签用法解析及如何设置select的默认选中状态...
当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 表单数据提交给服务器时包括 name 属性. 标签可选的属性 属性 值 ...
- vue单选框选中_【vue+elementui】el-radio单选框默认选中以及v-model绑定值问题
难度值:⭐ 需求描述: 弹窗里面的表单,是复用的后台返回数据,输入框里面的数据复用很容易,通过prop属性即可. 问题在于radio单选框,怎么将后台给的数值绑定为默认值 示例效果图: 涉及知识: 一 ...
- Vue之 解决下拉框默认选中的是数字key 不是汉字value值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 原因 v-model里面的数据和遍历出来value值数据类型不一样. (例:item ...
- easyui tree 默认选中第一个元素
系统采用ajax异步调用后端接口做数据呈现,有个场景就是加载的树形菜单默认选中第一行,网上有人分享的解决方案能实现效果(http://aokunsang.iteye.com/blog/1489204) ...
最新文章
- 那个脑袋生锈的我写的东西
- 文件翻译002片:Process Monitor帮助文档(Part 2)
- Python闭包及其作用域
- Docker阿里云镜像存储服务
- java.io设计模式_Java IO文件过滤器对命令设计模式的使用
- c语言函数的形参有几个,C中子函数最多有几个形参
- 通过xib创建控制器
- 对目录下所有库文件进行rpath更改操作的SHELL脚本
- java五子棋开题_五子棋 开题报告
- php正则表达式. 123,php正则表达式 - 路人甲123的个人页面 - OSCHINA - 中文开源技术交流社区...
- Mac电脑如何实现Word一键转PPT
- B站哔哩哔哩:11 月 22 日上午九时正起恢复在香港联交所买卖
- JAVA多媒体网络教学计算机毕业设计Mybatis+系统+数据库+调试部署
- 用VB.NET写的一个简易的RSS阅读器
- Android Studio 连接阿里云数据库【制作基于数据库的多人远程聊天APP】
- oracle elsif和else if,ORACLE ELSIF 与 ELSE IF
- 内存条的逻辑BANK和RANK(物理BANK)概念
- fabric-ca-client颁发Orderer节点证书
- 怎么利用Xshell 上传文件到Centos7 Xshell怎么上传文件
- Linux中使用命令查看目录信息、查看当前目录路径、清楚终端内容