vue-router嵌套路由(页面路径跳转但页面显示空白)

2023-11-08

如图所示从欢迎页跳转至用户列表

欢迎页:路径---welcome

用户页:路径---users

 

 可以看到路径发生了跳转,但跳转后的用户列表页面显示空白。路由嵌套代码如下:

 

查询相关资料,有两种解决方案:

1.path路径不用携带/ (未解决)

2.在home页面需添加router-view标签

在home页面的template下添加<router-view> </router-view>后,用户页面占据了整个页面,而我们需要将用户页面展示在主页面的右半部分:

查询相关资料可知,<router-view> </router-view>标签的位置不对。该标签的意思是将子路由的部分进行一个展示,重新调整位置

 

将<router-view> </router-view>写在主体<el-main></el-main>内:

 

解决问题!  

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue-router嵌套路由(页面路径跳转但页面显示空白) 的相关文章

随机推荐

  • JS逆向-百度翻译sign

    前言 本文是该专栏的第36篇 后面会持续分享python爬虫干货知识 记得关注 有粉丝留言 近期需要做个翻译功能 考虑到百度翻译语言语种比较全面 但是它的参数被逆向加密了 对于这种情况需要怎么处理呢 所以本文以它为例 废话不多说 跟着笔者直
  • uniapp实现小程序云开发

    打开微信开发者工具 填写你的appid 勾选使用云开发 对应的uniapp里也要配置上你的appid喔 在这个文件manifest json 我在App vue页面 不一定是在这个页面 可以视你的情况而定 里调用 了wx cloud ini
  • JavaScript算法之动态规划

    动态规划的基本概念 动态规划 Dynamic Programming DP 是运筹学的一个分支 是求解决策过程最优化的过程 动态规划算法通常用于求解具有某种最优性质的问题 在这类问题中 可能会有许多可行解 每一个解都对应于一个值 我们希望找
  • pyqt5 tableWidget入门,和treewidget联动功能

    1 成品 最近在做项目的过程中需要用到QTreeWidget和QTableWidget联动 上一篇文章介绍了 QTreeWidget的基本用法 这里介绍一下QTableWidget的基本用法 及我在项目中的使用 先看看最终成品 要实现以上图
  • Visual Studio 2017 、2019安装Windows SDK失败的解决办法(改盘符引起)

    如果是改盘符出错就请往下看 如果不是就别往下看了 这是血泪踩出来的坑 希望有所帮助 我是手残把电脑盘符改了 然后vs就开始疯狂报错 百试无果 百度不出 果断放弃 刚开始是安装的2017 卸载完后安装的2019 安好后就开始报 fatal e
  • vue(vue-cli3)根据不同环境打包

    配置环境 在项目根目录下创建两个文件 env test NODE ENV production VUE APP ENV test env build NODE ENV production VUE APP ENV production 修改
  • 雪梨小白的“码绘”起步——p5.js实现心形动态图形的绘制

    作为一个快乐的程序媛 尤其还是一个快乐的树莓程序媛 当然应该什么都会 所以这学期学院开了很多偏艺术类的课程让我们学习 然后就开始了互动媒体这门课的学习 这一次的作业要利用p5绘制动态图形 我自己还真的是活力满满的选了一个 emmmm 一点都
  • RBF与BP神经网络的实际案例研究

    RBF与BP神经网络的实际案例研究 应用实例 基于近红外光谱的汽油辛烷值预测 辛烷值是汽油最重要的品质指标传统的实验室检测方法存在样品用量大 测试周期长和费用高等问题 不适用与生产控制 特别是在线测试 今年发展起来的近红外光谱分析方法 NI
  • Python 常见170道面试题解析

    文章目录 基础 语言特性 编码规范 数据类型 字符串 列表 字典 综合 操作类题目 高级特性 正则表达式 其他内容 算法和数据结构 爬虫相关 网络编程 并发 Git 面试题 基础 1 列出 5 个常用 Python 标准库 os 与操作系统
  • Oracle12c连接问题ORA-28040:没有匹配的验证协议

    使用hibernate 连接oracle12c时报名如下 ORA 28040 没有匹配的验证协议 google 发现修改文件即可解决 ORACLE HOME network admin sqlnet ora 加入如下 SQLNET ALLO
  • 设置缓存的大小

    目录 1 CacheManager级别 2 Cache级别 3 大小衡量 4 配置大小示例 缓存大小的限制可以设置在CacheManager上 也可以设置在单个的Cache上 我们可以设置缓存使用内存的大小 也可以设置缓存使用磁盘的大小 但
  • 在HTML中用循环语句

    注意文件名后缀为 jsp 实例 table border 1 tr style background color FCFAF0 color 8F0000 td 编号 td td 编号 td td td tr table
  • 数字化孪生技术现状分析及发展趋势探讨

    今年的技术趋势报告继续在开头回顾了11年来技术趋势的发展 显示了技术趋势时间演变的全过程 最新的宏观科学技术力量为业务变革基础带来的共生利益和不久的未来新兴科学技术力量 随着企业应对不断变化的技术并迅速作出反应 期望更多的IT领导者和财务领
  • 启明智显分享

    SSD20X 点SPI RGB屏和SSD212 类似 区别在于对应文件名不同 SSD20X没有config ini文件 SSD20X SPI初始化文件 vi boot common cmd customer init c SSD20X由于没
  • 三维家可以导入别人的方案吗_三维家辅助工具如何使用?三维家辅助工具安装使用教程...

    三维家辅助工具是三维家3D云设计平台的辅助软件 可以通过这个工具直接批量上传产品模型和贴图 还能预览3vj格式的文件 可以借助这个辅助工具启动CAD 并从CAD导出图纸 有些朋友不太清楚这款软件是如何安装和使用的 接下来的文章中会有详细的介
  • 云创集团丨5G对于智能制造到底有何意义

    随着5G时代的来临 5G技术的应用已成为社会热门话题 诸如5G与人工智能 5G与车联网等 而在制造领域 当智能制造成为全球发展共识 5G对于智能制造来说 又有什么意义呢 接下来 云创智能集团将从以下三个方面探讨5G与智能制造的关系 智能制造
  • Java并发编程学习9-并发基础演练

    Java并发编程学习系列 构建高效且可伸缩的结果缓存 引言 主要内容 1 HashMap 并发机制 2 ConcurrentHashMap 3 ConcurrentHashMap Future 4 ConcurrentHashMap Fut
  • qt designer使用自定义ui控件

    文章目录 qt designer使用自定义ui控件 使用须知 插件应该存放的位置 Qt creator内置的designer 独立的designer 构建一个可使用的插件 Qt creator内置的designer使用 独立的designe
  • 你所不知道的android开发图标资源站

    1 Icon finder 这个网站的界面非常干净 它只有一个目的 为你的web项目找到合适的图标 在搜索框中输入关键字 你便会得到一组自动滚动加载的图标 网站也提供方便的工具 比如改变颜色 像素尺寸 这些选项都会帮助你找到最佳的图标 提供
  • vue-router嵌套路由(页面路径跳转但页面显示空白)

    如图所示从欢迎页跳转至用户列表 欢迎页 路径 welcome 用户页 路径 users 可以看到路径发生了跳转 但跳转后的用户列表页面显示空白 路由嵌套代码如下 查询相关资料 有两种解决方案 1 path路径不用携带 未解决 2 在home