vue二级路由不显示页面bug
如果父路由path是 / 则redirect直接匹配page2就可以
{path: '/',component: () => import('../view/analyse/analyse.vue'),redirect: '/page2', //这里前面加不加/都行children: [{path: 'page1',//这里前面加不加/都行component: () => import('../view/analyse/page/page1')},{path: 'page2',//这里前面加不加/都无所用component: () => import('../view/analyse/page/page2')},]}
如果父路由有path，redirect必须前面加上父路由，不然就会变成 /子路径 而子路由默认显示需要匹配/父路径/子路径
{path: '/analyse',component: () => import('../view/analyse/analyse.vue'),redirect: '/analyse/page2',//这里前面加不加/都行，必须父路由/子路由children: [{重点：：：：：：：：//这里前面不能加 /不然就会匹配成/page1path: 'page1', 实际他等同于 /analyse/page1//这里前面不能加 /不然就会匹配成/page1component: () => import('../view/analyse/page/page1')},{path: 'page2', //这里前面不能加 /component: () => import('../view/analyse/page/page2')},{path: 'page3', //这里前面不能加 /component: () => import('../view/analyse/page/page3')}]}
不使用redirect默认显示的子路由path为空就可以了
{path: '/', 或者 path: '/analyse',component: () => import('../view/analyse/analyse.vue'),children: [{path: '' , path为空就可以了component: () => import('../view/analyse/page/page1')},{path: 'page2',component: () => import('../view/analyse/page/page2')},]}
父页面需要有个占位标签来显示子路由的内容
<div class="content"><router-view /></div>
vue二级路由不显示页面bug相关推荐
- vue二级路由跳转后外部引入js失效问题解决方案
vue二级路由跳转后外部引入js失效问题解决方案 参考文章: (1)vue二级路由跳转后外部引入js失效问题解决方案 (2)https://www.cnblogs.com/LittleT/p/9077 ...
- vue 二级路由以及重定向
重定向 重定向通过routes 配置来完成 栗子: import Vue from 'vue' import Router from 'vue-router' import Film from '@/ ...
- vue 二级路由嵌套和二级路由高亮问题
第一层路由我写在app.vue里面.如图所示: footer.vue: 二级路由是这样: index.js里面的配置: 效果图: 效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮 ...
- vue二级路由和重定向问题
如果不使用二级路由,而且项目中有很多router-view的话,router-view中的内容显示就会产生混乱,这样就不太友好.当触发二级路由时,此路由就会将对应内容传给自己父级路由组件里的route ...
- Vue之鼠标悬停显示页面加载时间
效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- vue 路由嵌套(二级路由)
路由嵌套就是在父路由配置好后,配置一个children属性,里面放置的的内容跟routes属性下面的内容大体一样,这就是二级路由的配制方法. 嵌套路由的关键字children,在父路由中添加child ...
- vuejs中如何实现三级路由并刷新页面时保持当前路由激活状态
虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 如果不知道如 ...
- react二级路由配置正确不显示页面的问题解决
react二级路由配置正确不显示页面的问题解决 最近在写react项目,配置二级路由时出了一个小小的bug,虽然是一个小小的bug,但是也苦思大半天不得其解.直到第二天豁然开朗,才发觉就这?? 问题描 ...
- vue 路由二级跳转三级路由,路径变化页面没变
记录下路由跳转,二级路由跳转到三级路由(hidden为true)路径变化页面没变 比如账号列表(二级路由)跳转到账号详情(三级路由) routes的index页面,已设置details页面为hidde ...
最新文章
- MySQL 错误代码和消息
- redis集合数据过期_如何从Redis中的集合中自动删除过期的密钥？
- C#windows向窗体传递泛型类
- KubeVela安装
- 关于uniapp引入Vant Weapp第三方组件，遇到的问题和解决方式
- 基础笔试编程题（jz）
- pil python 安装_20行Python代码给微信头像戴帽子
- idea抽取重复方法快捷键_IDEA 真牛逼，900行 quot;又臭又长quot; 的类重构，几分钟搞定...
- mysql 多表查询详解_（转）Mysql 多表查询详解
- 操作系统实验报告 实验3存储管理实验(答案全）
- Javaweb家政服务管理系统的设计与实现
- 【Linux 中国】尝试 Nitrux 系统的六大理由
- 富爸爸实现财务自由七步骤
- 阿里云系统盘扩容及数据盘分区、格式化分区、挂载、取消挂载
- [原创]火箭发动机设计---民科版
- 【UE4】WebUI插件实现HTML透明区域事件穿透响应
- 4.22 使用裁切命令裁剪图片 [原创Ps教程]
- 计算机软件分类系统软件和,计算机化系统软件分类和验证
- java对接支付宝支付
- 老式计算机组装教程,旧机械硬盘可以装新电脑上吗？台式电脑加新/旧机械硬盘+分区教程...