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

看代码:

//主路由通过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. 集群通信组件tribes之集群的消息接收通道

    与消息发送通道对应,发送的消息需要一个接收端接收消息,它就是ChannelReceiver.接收端负责接收处理其他节点从消息发送通道发送过来的消息,实际情况如图每个节点都有一个ChannelSende ...

  2. 网站开发进阶(二十一)Angular项目信息错位显示问题解决

    Angular项目信息错位显示问题解决 绪 最近在项目开发过程中遇到这样一个棘手的问题:查询出所有订单信息后,点击选择某一个订单,查询出的结果是上一次查询所得的结果.而且会出现点击两次才可以显示订单详 ...

  3. RecyclerView notifyItem闪烁的问题

    之前我们做点赞,用listview做的话,就是在item实现点击后,写一个scal动画,不过现在都转到RecyclerView,那么要做这种效果于是做了一个notifyItemChanged()的操作 ...

  4. adb shell后出现error解决方案

    解决办法: 解决办法: 1.adb kill-server 2.adb start-server 3.adb remount 4.adb shell 一般情况下都可以在此启动adb相关

  5. 巧用FineReport搭建成本管控监测系统

    一.应用背景 企业在近几年快速发展,规模也越来越大,而信息传递与反馈手段却仍然比较落后,随着信息技术的不断发展,人们开始通过尝试利用技术手段改善这种环境.企业的项目不断增多,而作为高层管理者,通过层级 ...

  6. Android系统之Broadcom GPS 移植

    1.      内核部分的移植: 内核部分的移植基本上就是对芯片上下电,建立数据结构体,打通GPS通信的串口通道,以及建立文件设备结点供上层调用.所建立的文件结点是针对Power_enable和Res ...

  7. XMPP系列(一):OpenFire环境搭建

    XMPP的服务器可以用OpenFire.ejabberd.jabberd2.x.Prosody.Tigase,其中比较常用的是OpenFire和ejabberd,还可以自己写服务器,我们公司的服务器端 ...

  8. MarioTCP:一个单机可日30亿的百万并发长连接服务器

    原文:http://blog.csdn.net/everlastinging/article/details/10894493 注:如果用此服务器做变长data的传输,请在业务处理函数中为input ...

  9. linux内核自旋锁API

    我们大概都了解,锁这种机制其实是为了保护临界区代码的,关于使用和定义,我总结的API如下: #include <linux/spinlock.h> 定义自旋锁 spinlock_t loc ...

  10. Struct和Union在内存大小上的区别

    名字起的不好,但是也不知道该叫什么好,题目如下: typedef union {];char c;} DATE; struct data { int i; DATE k; double j; }; i ...