解决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 二级导航默认选中某一选项的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现二级导航栏效果

    vue实现二级导航栏效果

    本文实例为大家分享了vue实现二级导航栏效果展示的具体代码,供大家参考,具体内容如下 实现如下功能: 在.vue文件中,template中的内容如下: <template> <div id="app"> <nav class="sidebar"> <ul class="menu"> <li v-for="(navList,index) in navLists" :key=&

  • vue+Vue Router多级侧导航切换路由(页面)的实现代码

    当当当当当~我又来了. 在项目里经常会遇到侧导航切换页面的功能. 如果我们将侧导航做成公共组件,来调用的话,就会在每一个页面都引用该组件,在后期维护的时候比较麻烦,比如改参数. 所以此文将侧导航做成父页面组件,将切换的页面做成子页面,这样只需调用一次即可.大大减少了后期维护的麻烦 涉及功能点 侧导航支持多级 Vue Router的使用方法( 官方文档 ) 子父组件的写法 样式:elementUI 效果图 实现 --- 目录结构 --- Vue Router的使用方法 首先安装 npm insta

  • vue-router二级导航切换路由及高亮显示的实现方法

    vue-router二级导航切换路由及高亮显示的实现方法

    这里以网易云音乐作为示例,效果图: 我们先一层一层写导航 先设计第一层 1.设计导航页面样式 第一个导航页面为Discover Discover.vue: <!-- --> <template> <div> 发现 </div> </template> <script> export default { name: "discover", data() { return { }; } }; </script&g

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

    现在有一个需求是这样的: 这个需求很正常吧! 二级导航条,不是二级路由的(如果是二级路由是用linkActiveClass来做,我之前文章说过),是单纯获取数据的按钮,当这个页面出现时,默认选中第一项. 首先: 上面的判断的意思是:如果你点击某一个选项把这个index传过去,activeName等于那一个传过来的index(index是遍历出来的数据如:1,2,3,4,5),就显示该个active或者index==pid,pid默认为0,所以index==0,就是默认第一个选项被选中. 但是当我

  • 解决Vue 刷新页面导航显示高亮位置不对问题

    首先:现在是我点击在产品介绍页面 但是当我刷新页面后高亮位置就变成了第一个 在头部组件里面控制导航高亮显示是checked,默认值是0,触发点击事件会重新赋值,跳转路由,当刷新页面,checked值是0,所以要监听checked时刻发生变化:利用到vue的父子和子父传值:监听状态的变化 子页面将值传给父页面 父页面接收传过来的值 父组件把值传给header头部组件,头部组件通过prop接收 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子

  • 解决vue router使用 history 模式刷新后404问题

    因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

  • 解决vue router组件状态刷新消失的问题

    场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})跳转到主页,并在主页显示数据.但是当刷新页面时,由于并不是通过登录接口进入主页,router中没有'params: res.data'信息,主页无法获取到登录信息. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页

  • 解决vue+router路由跳转不起作用的一项原因

    如下所示: Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:'history',

  • vue router下的html5 history在iis服务器上的设置方法

    vue router下的html5 history在iis服务器上的设置方法

    首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

  • 解决vue打包项目后刷新404的问题

    vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu

  • vue select二级联动第二级默认选中第一个option值的实例

    当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 <div class="inputLine"> <span>所在区域</span> <select name="" v-model="countryName" @change="selectCountry"> <option :value=

  • vue.js 解决v-model让select默认选中不生效的问题

    笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这个问题,顺便分享一下. 问题 先上代码: 上图是前端的H5页面 下面是js代码: 一眼看上好像也没有什么问题.js 在初始化的时候,调用后台接口,取到数据然后传递给vue里面定义的data里面.并且前端页面除了select不能正常选中,其他的input 框的数据也都全部显示出来了(因为涉及一些机密的

随机推荐