vue 路由嵌套高亮问题的解决方法

 更新时间:2018年05月17日 11:14:38   作者:土豆儿哥  
这篇文章主要介绍了vue 路由嵌套高亮问题的解决方法,主路由通过v-for循环出来,次路由通过url拼接的方式导航到子路由页面,具体实现代码大家参考下本文

正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况

看代码:

//主路由通过v-for循环出来
<div class="list-group">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="doNothing" class="list-group-item" v-if="getPages.length != 0">数据统计</a>
  <router-link v-for="page in getPages" class="list-group-item" :to="page.pageUrl">{{page.pageName}}</router-link>
</div>
//次路由通过URL拼接的方式导航到子路由页面
<div class="panel-body tabs-wrap">
   <!--navtabbar begin-->
   <ul class="nav nav-tabs" v-if="isTencentPerson()">
      <router-link :to="{ name: 'statistics1',params:{showPanel:false} }" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >统计1</a></router-link>
      <router-link :to="{ name: 'statistics2' ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >统计2</a></router-link> 
      <router-link :to="{ name: 'statistics3' ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >统计3</a></router-link> 
   </ul> 
   <!--navtabbar end--> 
   <!--内容 begin-->
   <router-view></router-view>
</div>

子路由JS:

exprot default{  
     mounted() {
      this.routerHop();
    },
    updated() {
      //当前页再次点击主路由时重新判断跳转
      var url = this.$route.path;
      if (url === "/statistics/dataStatistics") {
        this.routerHop();
      }
    },
    methods: {
      //权限判断
      isPerson() {
        let user = this.$store.state.user.userInfo;
        if (user.userType == 1) {
          return true
        }
        return false;
      },
      routerHop(){
        // 客户账号登录只显示错误统计分析页面
        if(this.isPerson() === false){
          return router.push({name: 'statistics1', params: {showPanel: false}});
        }
        router.push({name: 'statistics3', params: {showPanel: false}}); },
       }
    }
}

因为已经在当前子路由页面,当再次点击主路由导航时,无法触发mounted钩子。通过updated这个钩子函数可以让再次找到对应子路由,从而解决再次点击主路由页面空白的bug。

总结

以上所述是小编给大家介绍的vue 路由嵌套高亮问题的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue3中页面跳转方式总结

    Vue3中页面跳转方式总结

    Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,它提供了多种方法来实现页面之间的导航,本文将详细介绍 Vue 3 中的各种页面跳转方式,有需要的小伙伴可以参考一下
    2024-12-12
  • Vue.js 中 ref 和 reactive 的区别及用法解析

    Vue.js 中 ref 和 reactive 的区别及用法解析

    在Vue.js中,ref主要用于创建响应式的引用,通过.value属性来访问和修改值,特别适用于需要频繁更改整个值的场景,而reactive则用于创建深度响应的对象或数组,本文给大家介绍Vue.js 中 ref 和 reactive 的区别及用法,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • vue+drf+第三方滑动验证码接入的实现

    vue+drf+第三方滑动验证码接入的实现

    这篇文章要给大家介绍的是vue和drf以及第三方滑动验证码接入的实现,下文小编讲详细讲解该内容,感兴趣的小伙伴可以和小编一起来学习奥
    2021-10-10
  • vue对storejs获取的数据进行处理时遇到的几种问题小结

    vue对storejs获取的数据进行处理时遇到的几种问题小结

    这篇文章主要介绍了vue对storejs获取的数据进行处理时遇到的几种问题小结,需要的朋友可以参考下
    2018-03-03
  • 使用vue实现通过变量动态拼接url

    使用vue实现通过变量动态拼接url

    这篇文章主要介绍了使用vue实现通过变量动态拼接url,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 前端vue3项目中百度地图的使用api以及操作实例

    前端vue3项目中百度地图的使用api以及操作实例

    最近项目要用到百度地图api,好久没用到地图,就百度了一番,但是找了好几篇文章,发现都没办法成功实现,现将方法记录如下,下面这篇文章主要给大家介绍了关于前端vue3项目中百度地图的使用api以及操作实例,需要的朋友可以参考下
    2023-05-05
  • 详解Vue基于vue-quill-editor富文本编辑器使用心得

    详解Vue基于vue-quill-editor富文本编辑器使用心得

    这篇文章主要介绍了Vue基于vue-quill-editor富文本编辑器使用心得,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 基于Vue-cli快速搭建项目的完整步骤

    基于Vue-cli快速搭建项目的完整步骤

    这篇文章主要给大家介绍了关于如何基于Vue-cli快速搭建项目的完整步骤,文中通过示例代码以及图片将搭建的步骤一步步介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • vue对于低版本浏览器兼容问题的解决思路

    vue对于低版本浏览器兼容问题的解决思路

    很多时候使用vue开发的项目,由于无法在低版本浏览器上运行,所以需要解决下,下面这篇文章主要给大家介绍了关于vue对于低版本浏览器兼容问题的解决思路,需要的朋友可以参考下
    2023-02-02
  • vue中ref的用法小结

    vue中ref的用法小结

    在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,在这里给大家分享vue中ref的用法,感兴趣的朋友一起看看吧
    2023-11-11

最新评论