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

看代码:

//主路由通过v-for循环出来
<div class="list-group">
<a href="javascript:;" 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:;">统计1</a></router-link>
      <router-link :to="{ name: 'statistics2' ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;">统计2</a></router-link>
      <router-link :to="{ name: 'statistics3' ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;">统计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 路由嵌套高亮问题的更多相关文章

  1. Vue路由嵌套

    Vue路由嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. vue 路由嵌套 及 router-view vue-router --》children

    vue 路由嵌套 vue-router -->children   在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...

  3. vue教程3-06 vue路由嵌套(多层路由),路由其他信息

    多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. Vue路由嵌套和命名视图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue路由--嵌套路由

    静态嵌套路由: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. vue路由嵌套,vue動態路由

    https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...

  7. 关于vue路由嵌套遇到的坑~

    关键在于子路由中的path问题,path之前不要放/ <!DOCTYPE html> <html lang="en"> <head> <m ...

  8. vue路由嵌套,对应展示的视图

  9. 六、Vue-Router:基础路由处理、路由提取成单独文件、路由嵌套、路由传参数、路由高亮、html5的history使用

    一.vue-router的安装 官网文档 [官网]:https://cn.vuejs.org/v2/guide/routing.html [router文档]:https://router.vuejs ...

随机推荐

  1. Flash Media Live Encoder 使用帮助

    翻译了一下Flash Media Live Encoder的帮助内容. Flash Media Live Encoder包含两个工具: Flash Media Live Encoder GUI(图 ...

  2. 1.1、Libgdx目标和特性

    Libgdx是一个通过统一的API工作在所有支持平台(Windows,Linux,Mac OS X,Android,黑莓,HTML/WebGL)的一个Java游戏开发框架. 框架提供了一个快速原型和快 ...

  3. (九)UIScrollView和PageControl的分页

    涉及到内容的滚动与拖拽,使用UIScrllView. 对于滚动的多张图片,由于超出屏幕,应该使用代码添加代码. 添加的细节是:图片的宽高即为滚动视图的宽高,图片的y=0,x=图片的序号乘以图片的宽度. ...

  4. Cocos2D场景中对象引用为nil时的判断

    如果该对象在SpriteBuilder中属性中设置了name,则检查是否 [self.scene getChildByName:@"theNameOfTheNode" recurs ...

  5. 禁用JavaScript控制台调试

    原文链接: Disable the User's JavaScript Console 原文日期: 2014年03月06日 翻译日期: 2014年03月07日 翻译人员: 铁锚 有几个巨头公司,即Fa ...

  6. [译] NSScanner:一个陌生的条件判断利器!

    NSScanner官方文档 NSScanner类是一个类簇的抽象父类,该类簇为一个从NSString对象扫描值的对象提供了程序接口. NSScanner对象把NSString 对象的的字符解释和转化成 ...

  7. AndroidUI之绘图机制和原理 最完整的文章

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/39961171,作者:skay  导读: 熟悉javaGUI的朋友对java绘图必定 ...

  8. Linux内核中断和异常分析(上)

    中断,通常被定义为一个事件.打个比方,你烧热水,水沸腾了,这时候你要去关掉烧热水的电磁炉,然后再去办之前手中停不下来的事情.那么热水沸腾就是打断你正常工作的一个信号机制.当然,还有其它的情况,我们以后 ...

  9. nasm汇编一些需要注意的地方

    经常用msam或tasm的童鞋一下转换到nasm下可能觉得不怎么适应,它们应该先去晓习一下gas的语法,然后就适应了-that's only a joke! :) section .data v101 ...

  10. LeetCode(53)-Binary Tree Paths

    题目: Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree ...