Vue路由跳转但显示空白页面

2022年6月22日 538次阅读 来源: Cigar#

在router文件下的index.js 中配置了‘Hi’的子路由，但是点击跳转界面却不显示子路由的内容，但是url正常改变。

《Vue路由跳转但显示空白页面》原因一：

没有在父路由中加上<router-view></router-view>，来将对应的组件内容渲染到router-view。

路由是负责将进入的浏览器请求映射到特定的 组件 代码中。  即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射，通过一个路径的url地址，可以唯一找到一个资源。

解决方法：在父路由的template中加上<router-view></router-view>

<template>
  <div class="hello">
    <router-view></router-view>
  </div>
</template>

原因二：

子路由path加了‘/’。

以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。

出错：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hi',
      component: Hi,
      children: [
        {path: '/', component: Hi},
        {path: '/hi2', component: Hi2},
        {path: '/hi3', component: Hi3}

      ]
    }
  ]
})

修改：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hi',
      component: Hi,
      children: [
        {path: '/', component: Hi},
        {path: 'hi2', component: Hi2},
        {path: 'hi3', component: Hi3}

      ]
    }
  ]
})

    原文作者：Cigar#
    原文地址: https://blog.csdn.net/weixin_51173316/article/details/119347349
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞