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

最新推荐文章于 2024-06-24 22:49:04 发布
原创 最新推荐文章于 2024-06-24 22:49:04 发布 · 4.2k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #html #html5 #css

在搭建后台管理项目时，遇到多级路由导致页面空白的问题。通过在父级路由中添加router-view标签，成功解决了页面无法正确加载的内容显示问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

搭建一个后台管理项目 遇到了多级路由的情况

 

 

1.这个是页面目录在这里插入图片描述


2.这是router里的index.js文件在这里插入图片描述
完全没毛病 路由是跳转了 但页面却是空白
找了好久 发现问题了 需要在父级路由页面里添加一个

router-view标签就完全没问题了

就是这样解决了这个问题
在这里插入图片描述

Myqqlady
关注
vue子路由跳转问题
xuxinwen32的博客
12-27 6134
问题大概是这样的，我这边简单的做了一个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学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
希望每天都能进步一点点
06-25 3072
Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
vue的router配置中children配置不起作用
毅香雪海的博客
11-22 8641
刚开始学习前端技术，再配置路由的时候，发现路由配置中children。 import Vue from 'vue' import Router from 'vue-router' import menus from '@/config/menu-config' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/table', //name: 'tab
vue 默认子路由不生效
weixin_43952634的博客
02-27 5880
当一个路由配置文件里有定义了两个路由时，默认子路由会不生效 export default [ { path: ‘/store’, component: () => import(’@/page/store/index’), name:“xxxxx”, children: [ { path: ‘’, redirect: { name: ‘storeHome’ }, }, { path: ‘ho...
【VUE】二级路由 子路由跳转空白
芳草萋萋鹦鹉洲哦
08-26 2960
App.vue一般这样写，这里是跟路由。想象一块大的屏幕，根路径的切换就是这个页面的切换。 <div id="app"> <router-view /> </div> home主页跳转submenu失败，地址栏显示路由没问题，但页面显示空白 router.js坑一：在子路由加了斜杠/，导致跳转空白不显示 routes: [ { path: '/', redirect: Home }, { path: '/login', component: Lo
记录 | vue-router：2级路由跳转不成功
taotu_tao的博客
11-05 3234
记录 | vue-router：2级路由跳转不成功：引入2级路由时，children单词拼错
基于vue-router 多级路由redirect 重定向的问题
10-18
本文将详细介绍在使用 vue-router 实现多级路由的重定向时可能会遇到的问题以及解决方案。 首先，让我们了解一些基础知识。在 vue-router 中，重定向是将指定路由映射到另一个路径的过程。重定向可以是动态的，也...
【Vue】vue-router路由使用
weixin_45291798的博客
06-24 778
hash模式1.地址中永远带着#号，不美观。2.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。3.兼容性较好。4.hash值不会包含在 HTTP 请求中，即:hash值不会带给服务器。history模式1.地址干净，美观。2.兼容性和hash模式相比略差。3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。1、如何配置路由？2、如何使用导航进行路由跳转声明式：router-link。
uni-app学习--基础组件使用、页面生命周期、本地存储、网络请求、条件编译、路由跳转
ChenLingZhi1115的博客
06-05 1551
uni-app提供了丰富的基础组件给开发者，开发者可以像搭建积木一样，组合各种组件拼接成自己的应用 uni-app中的组件，就像html中的div,p,span等标签的作用一样，用于搭建页面的基础结构 https://uniapp.dcloud.net.cn/component•text组件相当于行内标签，在同一行显示(相当于span标签) •除了文本节点以外的其他节点都无法长按选中 • 组件内只支持嵌套 ，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。但text嵌套text在小程序中布局是有
路由有孩子
最新发布
05-05
console.log('路由跳转路径:', to.matched.map(r => r.path)) return true }) ``` --- ### 四、完整解决方案 #### 4.1 **弹窗修复实现** ```vue // Vue3组合式API const dialogFormVisible = ref(false) const...
【Vue】 vue-Router children 子组件空白显示，没有内容
星辰大海
10-10 2976
场景： 打算访问 /parent/child1 和 /parent/child2 ，但产生问题是：子页面一直空白显示 # route.js 产生问题示例 { path: '/parent', children: [{ path: 'child1', component: () => import('@/pages/network/child1'), },{ path: 'child2', component: ()
解决访问不到vue的子子路由
m0_62159673的博客
01-28 878
因为父级嵌套子级，父级的compinent不能指向其他的组件，因为路由跳转就基于<router-view/>的，所有要配置一个空的<router-view/>才能显示。这是我原先的代码，一直访问不到这个路由。改成这样就能访问到子子路由了。
Vue中children组件不显示的原因
qq_69469062的博客
06-13 1208
一定要在父组件加上<router-view />，子组件的内容才会显示。
嵌套路由问题（子路由路径无法跳转，还是显示父路由）
weixin_41033048的博客
03-14 8487
官方文档的写法： 这里要注意的是，user有两个子路由，分别是profile和posts,如上图设置之后，需要在user.vue里面设置&lt;router-view&gt;&lt;/router-view&gt;才能显示跳转的子路由页面。 ...
vue怎么嵌套多级路由页面打不开_vue多级路由嵌套问题
weixin_39790102的博客
12-20 668
1.项目需要我这里是两层的子路由嵌套子路由{path: '/',name: 'FooterMain',component: FooterMain,redirect: '/main',children: [{path: 'main',name: 'Main',component: Main}, {path: 'marketMain',name: 'MarketMain',component: Mar...
Vue坑之children不显示问题
楠之枫雪的博客
03-25 2365
路由组件是要渲染到中的，请添加以下：
Vue路由，关于地址栏没有问题，router-view是一片空白
qq_41893686的博客
04-06 2026
首先看源代码 目录结构如下： App.vue <template> <div id="app"> <router-view></router-view> </div> </template> ...
vue 开发中路由空白问题
huangjinsheng1988的专栏
11-30 1618
开发用vue实现动态路由，左侧显示动态菜单栏，所有菜单共用一个index.vue文件，出现路由不跳转或者路由跳转后显示空白。 1.路由守卫拦截处理。 letoneRun=true //路由拦截 router.beforeEach(async(to,from,next)=>{ NProgress.start() awaitstore.dispatch('generateRoutes') //解决动态路由刷新空白问题 if(oneRun){ ...
vue-router嵌套路由（页面路径跳转但页面显示空白）
weixin_46326251的博客
11-29 4419
如图所示从欢迎页跳转至用户列表 欢迎页：路径---welcome 用户页：路径---users 可以看到路径发生了跳转，但跳转后的用户列表页面显示空白。路由嵌套代码如下： 查询相关资料，有两种解决方案： 1.path路径不用携带/ （未解决） 2.在home页面需添加router-view标签 在home页面的template下添加<router-view> </router-view>后，用户页面占据了整个页面，而我们需要将用户页面展示在主页面的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值