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


Posted in Javascript onMay 17, 2018

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

看代码:

//主路由通过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 路由嵌套高亮问题的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
JS前端加密算法示例
Dec 22 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
Rust中的Struct使用示例详解
Aug 14 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 #Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 #Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 #Javascript
AngularJS实现的base64编码与解码功能示例
May 17 #Javascript
解决修复npm安装全局模块权限的问题
May 17 #Javascript
npm 下载指定版本的组件方法
May 17 #Javascript
ES6之模版字符串的具体使用
May 17 #Javascript
You might like
长波有什么东西
2021/03/01 无线电
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
js表格分页实现代码
2009/09/18 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
vue 组件简介
2020/07/31 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python中的reduce内建函数使用方法指南
2014/08/31 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
自主招生自荐信格式
2015/03/04 职场文书
培训后的感想
2015/08/07 职场文书
我的中国梦主题班会
2015/08/14 职场文书
电台广播稿范文
2015/08/19 职场文书