vue 路由嵌套高亮问题
正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况
看代码:
//主路由通过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 路由嵌套高亮问题的更多相关文章
- Vue路由嵌套
Vue路由嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue 路由嵌套 及 router-view vue-router --》children
vue 路由嵌套 vue-router -->children 在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...
- vue教程3-06 vue路由嵌套(多层路由),路由其他信息
多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Vue路由嵌套和命名视图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue路由--嵌套路由
静态嵌套路由: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue路由嵌套,vue動態路由
https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...
- 关于vue路由嵌套遇到的坑~
关键在于子路由中的path问题,path之前不要放/ <!DOCTYPE html> <html lang="en"> <head> <m ...
- vue路由嵌套,对应展示的视图
- 六、Vue-Router:基础路由处理、路由提取成单独文件、路由嵌套、路由传参数、路由高亮、html5的history使用
一.vue-router的安装 官网文档 [官网]:https://cn.vuejs.org/v2/guide/routing.html [router文档]:https://router.vuejs ...
随机推荐
- StarUML添加自定义approach和profile
来源:fasiondog 添加Approch StarUML中的Approch也就是创建项目时的模板,其中预定义了所使用方法的模型和视图.StarUML默认Approach如下: StarUML的Ap ...
- 主流列式数据库评测:InfiniDB
).本文测试的InfiniDB版本是2010年12月20日发布的2.02版,下载文件名分别为InfiniDB64-2.0.2-2.exe 和InfiniDB64-ent-2.0.2-2.exe.安装文 ...
- FineReport性能调优的一些办法
FineReport性能调优的基本思路,就要对应用服务器的内存大小进行合理的设置. 一般服务器默认的内存配置都比较小,在较大型的应用项目中,这点内存是不够的,因此需要加工使其调大. 各应用服务器的内存 ...
- web报表工具FineReport常用函数的用法总结(文本函数)
文本函数 CHAR CHAR(number):根据指定数字返回对应的字符.CHAR函数可将计算机其他类型的数字代码转换为字符. Number:用于指定字符的数字,介于1Number:用于指定字符的数字 ...
- 用Xstream时候遇到的两个小异常
第一个 com.thoughtworks.xstream.converters.ConversionException: Cannot construct ClassXXX as it does no ...
- mybatis ---- 实现数据的增删改查
前面介绍了接口方式的编程,需要注意的是:在book.xml文件中,<mapper namespace="com.mybatis.dao.IBookDao"> ,命名空间 ...
- gcc如何生成预编译头文件(.gch)
1 建立comm.h 2 main.c中包含comm.h : #include "comm.h" 3 gcc -o comm.h.gch comm.h(低版本gcc会有bug) 4 ...
- 你真的知道.NET Framework中的阻塞队列BlockingCollection的妙用吗?
BlockingCollection集合是一个拥有阻塞功能的集合,它就是完成了经典生产者消费者的算法功能.一般情况下,我们可以基于 生产者 - 消费者模式来实现并发.BlockingCollectio ...
- JAVA物联网九大核心热点技术
1. Unix/Linux平台技术: Unix系统原理.Unix常用命令.Shell编程. 2. Java EE核心技术: Java语言核心.Java高级API.JVM及性能优化.Java Secu ...
- 小议 HashMap
大家都知道,在Java里对对象的操作是基于引用的.而当我们需要对一组对象操作的时候,就需要有接收这一组引用的容器.平时我们最常用的就是数组.在Java里可以定义一个对象数组来完成许多操作.可是,数组长 ...