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

看代码:

//主路由通过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. StarUML添加自定义approach和profile

    来源:fasiondog 添加Approch StarUML中的Approch也就是创建项目时的模板,其中预定义了所使用方法的模型和视图.StarUML默认Approach如下: StarUML的Ap ...

  2. 主流列式数据库评测:InfiniDB

    ).本文测试的InfiniDB版本是2010年12月20日发布的2.02版,下载文件名分别为InfiniDB64-2.0.2-2.exe 和InfiniDB64-ent-2.0.2-2.exe.安装文 ...

  3. FineReport性能调优的一些办法

    FineReport性能调优的基本思路,就要对应用服务器的内存大小进行合理的设置. 一般服务器默认的内存配置都比较小,在较大型的应用项目中,这点内存是不够的,因此需要加工使其调大. 各应用服务器的内存 ...

  4. web报表工具FineReport常用函数的用法总结(文本函数)

    文本函数 CHAR CHAR(number):根据指定数字返回对应的字符.CHAR函数可将计算机其他类型的数字代码转换为字符. Number:用于指定字符的数字,介于1Number:用于指定字符的数字 ...

  5. 用Xstream时候遇到的两个小异常

    第一个 com.thoughtworks.xstream.converters.ConversionException: Cannot construct ClassXXX as it does no ...

  6. mybatis ---- 实现数据的增删改查

    前面介绍了接口方式的编程,需要注意的是:在book.xml文件中,<mapper namespace="com.mybatis.dao.IBookDao"> ,命名空间 ...

  7. gcc如何生成预编译头文件(.gch)

    1 建立comm.h 2 main.c中包含comm.h : #include "comm.h" 3 gcc -o comm.h.gch comm.h(低版本gcc会有bug) 4 ...

  8. 你真的知道.NET Framework中的阻塞队列BlockingCollection的妙用吗?

    BlockingCollection集合是一个拥有阻塞功能的集合,它就是完成了经典生产者消费者的算法功能.一般情况下,我们可以基于 生产者 - 消费者模式来实现并发.BlockingCollectio ...

  9. JAVA物联网九大核心热点技术

    1. Unix/Linux平台技术: Unix系统原理.Unix常用命令.Shell编程.  2. Java EE核心技术: Java语言核心.Java高级API.JVM及性能优化.Java Secu ...

  10. 小议 HashMap

    大家都知道,在Java里对对象的操作是基于引用的.而当我们需要对一组对象操作的时候,就需要有接收这一组引用的容器.平时我们最常用的就是数组.在Java里可以定义一个对象数组来完成许多操作.可是,数组长 ...