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 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
简单了解JavaScript异步
May 23 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
yii数据库的查询方法
2015/12/28 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP解决中文乱码
2017/04/28 PHP
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python实现简单的语音识别系统
2017/12/13 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
python求前n个阶乘的和实例
2020/04/02 Python
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server