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 ...
随机推荐
- ubuntu如何添加新的PPA
首先要知道PPA源地址,比如: ppa:gwibber-daily/ppa 然后用apt-get指令添加: sudo add-apt-repository ppa:gwibber-daily/ppa ...
- LeetCode之“动态规划”:Edit Distance
题目链接 题目要求: Given two words word1 and word2, find the minimum number of steps required to convert wor ...
- 机器人操作系统ROS(indigo)与三维仿真软件V-Rep(3.2.1)通信接口使用笔记
关键字:ROS(indigo),V-Rep(3.2.1), vrep_ros_bridge(lagadic). vrep_ros_bridge提供了V-Rep和ROS之间的通信接口,可以实现使用ROS ...
- Socket层实现系列 — bind()的实现(一)
bind()函数的使用方法很简单,但是它是怎么实现的呢? 笔者从应用层出发,沿着网络协议栈,分析了bind()的系统调用.Socket层实现,以及它的TCP层实现. 本文主要内容:bind()的系统调 ...
- 记——加快gradle 构建速度的经验
Gradle作为一个新的构建系统,无疑在灵活,扩展,跨平台等各方面都表现得非常优秀,然而,它也有一点备受吐槽,就是速度慢.以下为本人使用gradle过程中,几次加快gradle构建速度的经验之谈. 本 ...
- mysql基础优化-explain的使用-mysql死锁
MySQL的优化 主要包括三个方面,首先是SQL语句的优化,其次是表结构的优化(这里主要指索引的优化),最后是服务器配置的优化. 一.SQL语句的优化 在 where 及 order by 涉及的列上 ...
- spring-cloud-config安全问题
配置服务的安全问题会很重要,其中的内容是我自己学习的,由于学习时间不长,有可能不是很完备,如果有更好的方案,烦请评论中留言或私信,谢谢! 1. 首先访问配置服务需要设置密码: 使用spring-sec ...
- 解决ecshop3.6 H5版本公告页面为空的修改办法
ecshop3.6公告页面打开如下,页面完全无效果,如下图. 经过简单美化后,有返回按钮,页面加以美化.如下图. 是不是要好看多了.简单修改几步即可. 修改文件 \appserver\resource ...
- Oracle面试过程中常见的二十个问题
1.冷备份和热备份的不同点以及各自的优点 解答:热备份针对归档模式的数据库,在数据库仍旧处于工作状态时进行备份.而冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库.热备份的优点在于当备份时, ...
- WebRequestHelper
老是浪费时间写这个类,干脆记录在博客里: public class WebRequestHelper { #region Post public static CookieContainer GetC ...