路由嵌套跳转失败，页面是空白的

最新推荐文章于 2023-12-01 22:11:46 发布

奶思兔米柚兔

最新推荐文章于 2023-12-01 22:11:46 发布

阅读量639

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_47730392/article/details/122275650

版权

在使用Vue.js开发前端页面时，遇到路由嵌套问题，导致侧边栏点击后页面显示为空白。经过排查，发现是将子路由的'children'属性误写为'child'，修正后问题得到解决。

摘要由CSDN通过智能技术生成

今天编写了一个前端页面，使用了路由嵌套，用于侧边栏点击不同选项显示在主页面不同表格，但是每次点击之后都跳转到空白页，找了好久发现是把子路由的children写成了child，修改之后问题解决。

routes: [
      {
   
          path:'/',
          name:'login',
          component: loginRegister
      },
      {
   
          path:'/second',
          name:'second',
          component:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

奶思兔米柚兔

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue子路由跳转问题

xuxinwen32的博客

12-27

6041

问题大概是这样的，我这边简单的做了一个demo import Vue from 'vue' import ElementUI from 'element-ui' // import '../stastic/element-ui2.4.9-index.css' import 'element-ui/lib/theme-chalk/index.css' import VueRouter from ...

vue路由嵌套无法渲染页面空白

大土的博客

01-11

8350

在学习vue的时候，根据官方教程卸了嵌套路由，结果页面空白 router/index.js import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import login from '@/components/layout/login' impor...

参与评论您还未登录，请先登录后发表或查看评论

vue-入坑--嵌套路由导致页面跳转为空问题（子页面内容不显示）

lzhzlm的博客

06-06

8389

vue-入坑–嵌套路由导致页面跳转为空问题（页面不显示内容）遇到的问题使用嵌套子路由切换页面，地址栏有变化，但是子页面内容没有显示（一片空白）。上代码~~ 嵌套子路由代码 src->router->index.js //... import Detail2 from '@/components/Detail2' import Details from '@/components/Details' //... export default new Router({ // 去掉 http

vue-router 嵌套路由显示空白页

weixin_30352191的博客

02-21

2389

路由嵌套路由跳转当访问localhost:8080/enterZZ/companyHonor时显示空白此时检查路径，拼写，是否导入等问题，没有发现错误，后查找资料得知缺少了：<router></router> 注：在App.vue文件中写了容器<router></router>，便以为其他地方不用在写了，其实不对，每一个有c...

vue route路由嵌套不起作用

m0_47531829的博客

07-28

887

vue route路由嵌套不起作用

html路由跳转首页空白,vue项目npm run build后本地打开空白，资源路径出错, 跳转路由页面无法显示...

weixin_42509518的博客

07-19

433

第一：config/index.js中assetsPublicPath: ‘/‘改为’./‘打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件，就得修改文件路径。第二：更改工程 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置，重新打包：pu...

详解vue路由篇(动态路由、路由嵌套)

12-08

在 Vue 中，`vue-router` 是官方提供的路由管理器，它使得单页面应用（SPA）能够根据 URL 地址切换不同的视图。路由的主要职责是根据 URL 映射到相应的组件，从而实现页面间的导航。一、基础路由创建 Vue 项目时...

在vue中实现嵌套页面(iframe)

11-19

vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”...

vue 路由嵌套高亮问题的解决方法

08-27

在这个场景中，我们遇到了一个特定的问题：路由嵌套高亮问题，即在主路由和子路由切换时，对应的导航菜单未能正确地高亮显示，或者在某些情况下导致页面数据空白。以下是如何解决这个问题的详细步骤和解释： 1. **...

微信vue路由跳转兼容_vue使用感受（二）组件间跳转

weixin_39606048的博客

12-19

316

想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看。昨天我们聊了一下vue的组件间传值，今天来讨论下我遇到的第二个问题组件间跳转。在不使用前端框架的时候，如果我们要点击菜单跳转到指定页面，一般来说可以使用标签或者在页面中嵌套iframe。前者可以改变页面路径或者通过锚点来跳转到页面指定位置，后者则是在页面中嵌套一个子页面，可以部分刷新，改变内容。不过HTML5已经不再支持if...

多级路由子路由跳转空白（vue 路由children失效）

Myqqlady的博客

06-15

4087

搭建一个后台管理项目遇到了多级路由的情况 1.这个是页面目录 2.这是router里的index.js文件完全没毛病路由是跳转了但页面却是空白找了好久发现问题了需要在父级路由页面里添加一个 router-view标签就完全没问题了就是这样解决了这个问题 ...

记录 | vue-router：2级路由跳转不成功

taotu_tao的博客

11-05

2870

记录 | vue-router：2级路由跳转不成功：引入2级路由时，children单词拼错

iframe嵌套网页多出来的空白如何解决

qq_53715696的博客

03-21

1288

解决iframe头部问题

vue怎么嵌套多级路由页面打不开_vue多级路由嵌套问题

weixin_39790102的博客

12-20

627

1.项目需要我这里是两层的子路由嵌套子路由{path: '/',name: 'FooterMain',component: FooterMain,redirect: '/main',children: [{path: 'main',name: 'Main',component: Main}, {path: 'marketMain',name: 'MarketMain',component: Mar...

vue路由传参之使用query传参页面刷新数据丢失问题解析

热门推荐

weixin_51173316的博客

08-03

3万+

在router文件下的index.js 中配置了‘Hi’的子路由，但是点击跳转界面却不显示子路由的内容，但是url正常改变。原因一：没有在父路由中加上<router-view></router-view>，来将对应的组件内容渲染到router-view。路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射，通过一个路径的url地址，可以唯一找到一个资源。解决方法：在父路由的...

记录vue-router跳转页面空白问题

Nothingnessdosink的博客

12-19

6308

vue- router里踩坑太多，全记录在这里，持续更新。

一篇文章解决vue路由带参数使用params或者query的问题

lwjoo001的博客

09-10

887

参数的获取写在开头 1、普通跳转（不带参数）路由配置如下：跳转方式如下：两种方式都可以跳转 2、路由配置带参数：首先，先确定个概念：跳转路由用name的时候带参数用params，用path的时候用query（router文件用，path未定义参数），除非用完整路径path 路由配置如下：（1）在router文件中path后面带参数跳转方式如下 ...

vue路由跳转页面空白

05-12

出现页面空白的情况可能有多种原因，以下是一些常见的解决方案： 1. 检查路由配置是否正确，确保路由指向的组件是存在的。 2. 确保在路由跳转时使用了正确的路径。如果使用了相对路径，可能会导致跳转到了错误的页面。 3. 如果路由指向的组件中有异步加载的内容，可能需要等待加载完成后再显示页面。可以在组件中添加 loading 状态，或者使用异步组件来解决。 4. 检查浏览器控制台是否有报错信息。有时候错误的代码可能会导致页面无法正常渲染。 5. 如果使用了 Vue CLI 创建项目，并且在部署时出现空白页面，可以尝试将 publicPath 设置为相对路径，或者使用 Hash 模式。可以在 vue.config.js 文件中进行配置。希望以上解决方案能够帮助你解决问题。