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

 更新时间:2022年04月29日 09:57:26   作者:weixin_46326251  
这篇文章主要介绍了vue-router嵌套路由方式(页面路径跳转但页面显示空白),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

欢迎页:路径---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>内:

解决问题!  

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue如何使用bable将es6转译为es5

    vue如何使用bable将es6转译为es5

    这篇文章主要介绍了vue如何使用bable将es6转译为es5问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 大前端代码重构之事件拦截iOS Flutter Vue示例分析

    大前端代码重构之事件拦截iOS Flutter Vue示例分析

    这篇文章主要为大家介绍了大前端代码重构之事件拦截iOS Flutter Vue示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue处理emoji表情占位符的操作方法

    vue处理emoji表情占位符的操作方法

    在计算字符数时,一般情况下,英文字符、数字和大部分符号都可以被视为占一个字符长度,因为它们是单个字节,然而,对于某些特殊字符,如表情符号和部分非英文字符,会被认为占据了多个字符长度,本文给介绍了vue处理emoji表情占位符的操作方法,需要的朋友可以参考下
    2024-06-06
  • Vue 菜单栏点击切换单个class(高亮)的方法

    Vue 菜单栏点击切换单个class(高亮)的方法

    今天小编就为大家分享一篇Vue 菜单栏点击切换单个class(高亮)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • el-table树形数据量过大,导致页面卡顿问题及解决

    el-table树形数据量过大,导致页面卡顿问题及解决

    这篇文章主要介绍了el-table树形数据量过大,导致页面卡顿问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue插件vue-resource的使用笔记(小结)

    vue插件vue-resource的使用笔记(小结)

    本篇文章主要介绍了vue插件vue-resource的使用笔记(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Element-Plus Select组件实现滚动分页加载功能

    Element-Plus Select组件实现滚动分页加载功能

    Element-Plus的select组件并没有自带滚动分页加载的功能,其虽然提供了自定义下拉菜单的底部的方式可以自定义上一页及下一页操作按钮的方式进行分页加载切换,这篇文章主要介绍了Element-Plus Select组件实现滚动分页加载功能,需要的朋友可以参考下
    2024-03-03
  • Vue封装svg-icon组件使用教程

    Vue封装svg-icon组件使用教程

    SVG(Scalable Vector Graphics)可缩放矢量图形,是一种用于描述基于二维的矢量图形的 XML 标记语言,其基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等,还能显示文字对象和嵌入式外部图像
    2023-02-02
  • vue3切换路由时页面空白问题解决办法

    vue3切换路由时页面空白问题解决办法

    在使用Vue3时,有时页面修改后会出现空白,这篇文章主要介绍了vue3切换路由时页面空白问题解决办法,文中介绍的步骤可以有效解决页面空白问题,需要的朋友可以参考下
    2024-09-09
  • vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

    vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

    这篇文章主要介绍了使用vue-contextmenujs鼠标右键菜单时,当高度不够时显示不全的问题,大家需要注意本文给提供的解决方案虽然能够解决现有问题,但是如果组件升级了,想要使用最新升级后的组件,还要再次修改代码,需要的朋友可以参考下
    2022-07-07

最新评论