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

 更新时间:2019年11月01日 16:39:17   作者:versionli  
今天小编就为大家分享一篇解决vue-router 二级导航默认选中某一选项的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

首先:

上面的判断的意思是:如果你点击某一个选项把这个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 二级导航默认选中某一选项的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3使用video.js播放m3u8格式视频的操作指南

    vue3使用video.js播放m3u8格式视频的操作指南

    有时候我们需要播放 m3u8 格式的视频,或者实现视频播放器更多定制化需求,HTML 的 video 元素无法实现这些需求,这时候可以考虑使用 Video.js,本文给大家介绍了vue3使用video.js播放m3u8格式视频的操作指南,需要的朋友可以参考下
    2024-07-07
  • 在vue路由上添加公共的路由前缀方式

    在vue路由上添加公共的路由前缀方式

    这篇文章主要介绍了在vue路由上添加公共的路由前缀方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue实现在线预览office文件的示例代码

    vue实现在线预览office文件的示例代码

    本文主要介绍了vue实现在线预览office文件,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue通过cookie获取用户登录信息的思路详解

    vue通过cookie获取用户登录信息的思路详解

    这篇文章主要介绍了vue通过cookie获取用户登录信息的思路详解,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • vant的picker的坑及解决

    vant的picker的坑及解决

    这篇文章主要介绍了vant的picker的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue使用axios导出后台返回的文件流为excel表格详解

    vue使用axios导出后台返回的文件流为excel表格详解

    这篇文章主要介绍了vue使用axios导出后台返回的文件流为excel表格方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue3中动态修改样式与级联样式优先顺序图文详解

    Vue3中动态修改样式与级联样式优先顺序图文详解

    在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,下面这篇文章主要给大家介绍了关于Vue3中动态修改样式与级联样式优先顺序的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Pinia简单使用以及数据持久化详解

    Pinia简单使用以及数据持久化详解

    最近正在使用Pinia进行状态管理,我希望在重新刷新页面时保持状态,下面这篇文章主要给大家介绍了关于Pinia简单使用以及数据持久化的相关资料,需要的朋友可以参考下
    2022-05-05
  • 使用Elemen加上lang=“ts“后编译报错

    使用Elemen加上lang=“ts“后编译报错

    本文主要介绍了使用Elemen加上lang=“ts“后编译报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Vue3使用customRef封装防抖函数的方法详解

    Vue3使用customRef封装防抖函数的方法详解

    防抖函数的作用是高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间,本文将给大家详细的介绍一下Vue3使用customRef封装防抖函数的方法,需要的朋友可以参考下
    2023-09-09

最新评论