解决vue-router 二级导航默认选中某一选项的问题


Posted in Javascript onNovember 01, 2019

现在有一个需求是这样的:

解决vue-router 二级导航默认选中某一选项的问题

这个需求很正常吧! 二级导航条,不是二级路由的(如果是二级路由是用linkActiveClass来做,我之前文章说过),是单纯获取数据的按钮,当这个页面出现时,默认选中第一项。

首先:

解决vue-router 二级导航默认选中某一选项的问题

解决vue-router 二级导航默认选中某一选项的问题

解决vue-router 二级导航默认选中某一选项的问题

上面的判断的意思是:如果你点击某一个选项把这个index传过去,activeName等于那一个传过来的index(index是遍历出来的数据如:1,2,3,4,5),就显示该个active或者index==pid,pid默认为0,所以index==0,就是默认第一个选项被选中。

但是当我点击其它项的时候,要把那个pid改为false,只能把这个false赋值给uid,uid却不能在data里而声明,因为组件遍历v-for是时候就默认执行了selected()这个函数,所以只能把这个赋值给全局

解决vue-router 二级导航默认选中某一选项的问题

我目前只能用这个方法解决这个问题,如果有更好的方法,希望可以共享一下

以上这篇解决vue-router 二级导航默认选中某一选项的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
jQuery设计思想
Mar 07 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 #Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 #Javascript
vue实现计步器功能
Nov 01 #Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 #Javascript
js canvas实现星空连线背景特效
Nov 01 #Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
微信小程序定义和调用全局变量globalData的实现
Nov 01 #Javascript
You might like
php弹出对话框实现重定向代码
2014/01/23 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
json 实例详细说明教程
2009/10/31 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
判断网页编码的方法python版
2016/08/12 Python
python如何在终端里面显示一张图片
2016/08/17 Python
pandas string转dataframe的方法
2018/04/11 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python 使用shutil复制图片的例子
2019/12/13 Python
如何实现jdbc性能优化
2012/07/30 面试题
爱心捐助倡议书
2014/05/19 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
医德医风个人总结
2015/02/28 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
成事在人观后感
2015/06/16 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书