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 ...
随机推荐
- 简译《Dissecting SQL Server Execution Plans》——连载总入口
转载请注明出处 由于工作及学习需要,最近看了一下<Dissecting SQL Server Execution Plans>,这是少有的专门描述执行计划的优秀书籍,为了快速查找并供入门同 ...
- Cocos2D的平台检查宏
为了避免在非iOS平台包含UIKit.h文件,需要在Prefix.pch文件中添加一个条件判断: #if __CC_PLATFORM_IOS #import <UIKit/UIKit.h> ...
- Javascript和BHO的相互调用简介
v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...
- Linux下进程通信之管道
每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之间要交换数据必须通过内核,在内核中开辟一块缓冲区,进程1把数据从用户空间拷到内核缓冲区,进程2再从内核缓冲区把 ...
- 用O_APPEND标志open一个文件,能否用lseek在任意位置读写
结论比较简单,用O_APPEND打开后,write操作是一个原子操作,所以每次都会自动把偏移量移到文件末尾,所以用lseek不能在任意位置write.但是可以用lseek在任意位置开始读.下面用代码测 ...
- Gathering Initial Troubleshooting Information for Analysis of ORA-4031 Errors on the Shared Pool
In this Document Purpose Troubleshooting Steps References APPLIES TO: Oracle Database - Enterp ...
- mybatis源码之BaseStatementHandler
/** * @author Clinton Begin */ public abstract class BaseStatementHandler implements StatementHandle ...
- web报表工具FineReport最经常用到部分函数详解
之前分别列出来了finereport常用的文本.时间函数的解释,这里应广大朋友的要求,整理了finereport最常用到的一些函数! SUM SUM(number1,number2,-):求一个指定单 ...
- python 字典dict类型合并(不能错过哦)
我要的字典的键值有些是数据库中表的字段名, 但是有些却不是, 我需要把它们整合到一起, 因此有些这篇文章.(非得凑够150个字,我也是没有办法,扯一点昨天的问题吧,话说python中的session就 ...
- 学习Selenium遇到的问题和解决方案
问题1:IE驱动位数问题,未安装对应的IE,打不开IE浏览器(已解决20180323) 使用Selenium启动IE浏览器的时候,报错,报错信息如下 org.openqa.selenium.remot ...