【VUE】二级路由子路由跳转空白

最新推荐文章于 2024-09-25 15:51:48 发布

小鱼小鱼干

最新推荐文章于 2024-09-25 15:51:48 发布

阅读量2.8k

点赞数 2

分类专栏：前端踩坑路漫漫 # 手机端/手持移动设备文章标签： vue.js vue路由 router

本文链接：https://blog.csdn.net/weixin_43361722/article/details/119932435

版权

前端踩坑路漫漫同时被 2 个专栏收录

97 篇文章 7 订阅

订阅专栏

手机端/手持移动设备

19 篇文章 2 订阅

订阅专栏

本文介绍了在Vue应用中遇到的路由配置问题，包括子路由添加斜杠导致的页面空白和父路由缺少`router-view`占位标签。通过修复这两个问题，可以确保页面正确地进行路由切换。在`router.js`中，删除子路由的斜杠，并在父模板中添加`<router-view/>`标签，以实现路由视图的显示。

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

App.vue一般这样写，这里是跟路由。想象一块大的屏幕，根路径的切换就是这个页面的切换。

<div id="app">
	<router-view />
</div>

home主页跳转submenu失败，地址栏显示路由没问题，但页面显示空白

router.js坑一：在子路由加了斜杠/，导致跳转空白不显示

routes: [
    { path: '/', redirect: Home },
    { path: '/login', component: Login },
    { path: '/home', component: Home,
      children: [
      // 坑一：之前在子路由加了斜杠/，导致跳转空白不显示
        { path: 'submenu',component: submenu}
      ]
    }
  ]

父路由home：坑二：父路径没有配置占位标签router-view

<template>
	<div>
		<div>----<div>
		<div>----<div>
		<div>
			<!--坑二：父路径没有配置占位标签router-view-->
			<router-view><router-view>
		<div>
	</div>
</template>