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

已于 2022-09-14 10:58:30 修改
阅读量7.5k 收藏 1
点赞数
文章标签： vue.js javascript 前端
于 2018-06-30 14:39:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/versionli/article/details/80866207
版权

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

这个需求很正常吧！ 二级导航条，不是二级路由的（如果是二级路由是用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()这个函数，所以只能把这个赋值给全局

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

  ================================================


发奋图强_lee
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue嵌套路由（默认显示第一个children路由）
Debug的博客
04-20 4641
App根组件中必须加router-view router文件中 import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/home/Home.vue"; import Detail from "../views/home/detail.vue"; import Detail1 from "../views/home/detail1.vue"; Vue.use(VueRouter); const
解决vue-router 二级导航默认选中某一选项的问题
10-16
今天小编就为大家分享一篇解决vue-router 二级导航默认选中某一选项的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue路由(router)设置：父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失
热门推荐
HELLO WORLD
05-26 1万+
本文知识点比较简单，主要面向新人解惑，vue前辈请忽略。 我们需要实现的效果，父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失，见下图： 在实际开发中，可能遇到了当前路由下（父路由）在点击它的子路由时，他的（父路由）选中状态消失了 原因： 1、子路由router-link加了exac精确匹配路由 2、在写路由的时候，父子路由没有严格按照一级/二级来写 ...
【vue】router-link 第一个默认选中，exact当地址为 / 的时候被激活，点击高亮等问题
WANGHUAN-
03-18 8912
1.在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？ 如何做？ 在路由里面设置router/index.js 此时页面中会激活open 及active属性 在谷歌浏览器检查是否加载，在样式添相应样式即可 .active{ color:red; } 但是此时我们发现 to=’/’ 一直高亮 举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。 按照这...
Vue3:menu导航栏出现多个同一跳转路径的菜单处理
最新发布
qq_45061461的博客
05-07 635
最近公司想将之前老的项目整理出来，因为这个老项目内容太杂什么页面都往里面塞，导致菜单特别多，公司就像将这个老的项目迁出来，这个旧的项目本来是后端PHP写的。我们想的是新需求页面做在新项目然后再新的项目中显示旧项目页面。现在我就想的是如果在新项目中显示旧的项目页面，但是在vue中路由跳转一般都是一个页面对应一个路由，旧项目页面太多上百个，如果旧页面还没迁离出来，新的项目已经有上百个文件来显示页面，太冗余了，就想着用一个页面现在没有迁离出来的就页面。1.新项目中获取后端返回的页面权限以及页面的路由等信息。
vue 二级导航重定向，二级导航默认选中某一项的问题
versionli的博客
10-30 638
很多初学者，往往让二级导航重定向的问题烦着，特别是想用router-link-active来处理，其实用路由提供的router-link-active是做不到多级路由默认样式的，所以我用的是动跳转this.$router.push方法，当然如果您有更好的方法，可以在评论区里留言一下。 这个是仿酷我音乐pc官网 一级路由： 图一 图二： 图三： 二级路由： 图四： 图五： 下面就是重点了 图六： 当我点击“排行榜”，之后复制url再在另一个...
vue-element-admin菜单导航始终只展开一个
qq_42672424的博客
04-13 5842
vue-element-admin菜单导航始终只展开一个 全局搜索:unique-opened找到该配置将其改成true unique-opened：是否只保持一个子菜单的展开
vue-router二级导航切换路由及高亮显示的实现方法
10-16
本篇文章将深入探讨如何在Vue Router中实现二级导航的切换路由以及高亮显示。 首先，我们要创建两个主要的导航页面，比如“发现”和“我的音乐”。在Vue中，我们可以创建两个单独的组件，如`Discover.vue`和`...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
利用vue-router实现二级菜单内容转换
11-27
二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。 如果用vue的话，可以用vue-router改变<router>里面的组件，这样就能做到不刷新页面...
vue-router实现根据用户权限显示不同菜单-动态路由
weixin_42349568的博客
01-29 1万+
一，情景再现 做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是： 前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中，整个过程大致如下： import Vue from 'vue' import VueRouter from 'vue-router' import s
vue父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失
weixin_33928467的博客
03-17 1967
vue父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意： 1. exact 不要加 注意是不要加，exact 属性表示精确匹配，这里不要加 <router-link :to="index" exact>首页</router-link> 2. children...
Vue3 根据用户权限设置动态菜单
黑猫几绛的博客
07-03 5800
在中后台管理系统中，我们知道可以有多种用户实体。以学生管理系统为例，和就是两个拥有不同职责的实体对象。当不同权限的用户登录管理系统时，他们所需要的功能也就不同。比如管理学生信息，而不仅可以管理学生，也可以处理一些老师的信息。由于职责不同，（通常来说在左侧）的用户功能菜单也就不一样。需求：不同的用户在登录后可以看到不同的菜单。在实现功能需求前首先需要明确一点，在登录页面输入账号密码进行登录后，在没有的情况下一般是跳转到首页。在这个过程中，仔细想想，常见的处理大致是：需要注意的是，登录操作是在login页面完成
vue-router中的router-link的active-class
weixin_34032779的博客
01-29 1710
在vue-router中要使用选中样式的方法有两种： 1、直接在路由js文件中配置linkActiveClass 2、在router-link中写入active-class 问题：如果就这样，那么会出现一个问题，不管跳转到哪里，跳转到根目录的那个连接（to="/"） 始终都会有选中样式 　　为什么会这样呢？查阅文档：https://route...
router-link标签的选中激活导航router-link-active
斗师——Ace
02-27 7741
添加小程序，兑换各种视频教程/数据资源。 router-link: 其中tag='div'表示router-link为div标签 <template v-for="(item,index) in arr" v-if="arr.length>0"> <router-link tag="div" class="tab_item fle...
vue-router
Demolist的博客
07-07 234
vue-router的用法详细，包括路由基础，嵌套路由，动态路由
element导航栏router跳转+++++++++element导航栏选中后刷新保持当前选中状态++++++element导航栏只能有一个子菜单的展开
一只生菜
03-12 1137
element导航栏router跳转和导航栏选中后刷新保持当前选中状态和导航栏保持一个子菜单的展开
vue学习基础知识篇六--路由--选中高亮
wuxiaowu123的博客
09-11 687
创建一个新的项目，依然先不要装路由，自己来装，初始化项目之后，在项目根目录执行： cnpm install vue-router --save 在项目中安装路由。然后在main.js文件中引入安装的路由才能使用，固定格式 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 这样路由的环...
vue - router（路由）
tian_to_tian的博客
09-07 187
两个标签： router-link：类似于a标签，to属性相当于a标签当中的href router-view：容器，用于
如何使用Vue根据vue-router生成菜单导航栏简单实现
03-31
1. 安装vue-router ```bash npm install vue-router --save ``` 2. 创建router.js文件并配置路由 ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import About from '@/components/About' import Contact from '@/components/Contact' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About }, { path: '/contact', name: 'Contact', component: Contact } ] }) ``` 3. 在App.vue中引入router并设置router-view组件 ```vue <template> <div id="app"> <nav> <ul> <li><router-link to="/">Home</router-link></li> <li><router-link to="/about">About</router-link></li> <li><router-link to="/contact">Contact</router-link></li> </ul> </nav> <router-view/> </div> </template> <script> import router from './router' export default { name: 'App', router } </script> ``` 4. 在router.js中添加meta属性 ```javascript export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home, meta: { title: 'Home' } }, { path: '/about', name: 'About', component: About, meta: { title: 'About' } }, { path: '/contact', name: 'Contact', component: Contact, meta: { title: 'Contact' } } ] }) ``` 5. 在App.vue中动态生成菜单导航栏 ```vue <template> <div id="app"> <nav> <ul> <li v-for="route in $router.options.routes"> <router-link :to="route.path">{{route.meta.title}}</router-link> </li> </ul> </nav> <router-view/> </div> </template> ``` 这样就可以根据vue-router生成菜单导航栏了。当需要增加新的页面时，只需要在router.js中添加路由和meta属性，菜单导航栏会自动更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值