vue-router配置好了路由，但是输入子路由的地址跳转显示空白

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../components/Index.vue'
import DanGao from '../components/DanGao.vue'
import LingShi from '../components/LingShi.vue'
import Tmm from '../components/Tmm.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Tmm,
    redirect: '/index',
    children: [
      { path: './index', component: Index },
      { path: './dangao', component: DanGao },
      { path: './lingshi', component: LingShi }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

上图是路由配置的代码

下面是tmm的组件代码

<template>
  <div class="all">
    <sweet-header></sweet-header>
    <router-view></router-view>
    <sweet-footer></sweet-footer>
  </div>
</template>

<script>
import Header from './common/Header.vue'
import Footer from './common/Footer.vue'
export default {
  components: {
    SweetHeader: Header,
    SweetFooter: Footer
  }
}

组件里面也配置好了

dangao.vue

<template>
  <h1>蛋糕</h1>
</template>

<script>
</script>

<style>
</style>

但是切换的时候就是显示空白 http://localhost:8080/#/dangao

vue-cli里面也没有报错，不知道到底问题在哪里。求个大神解答一下。。谢谢了

按照我这个例子改改看，我这个是正常运行的

export const constantRoutes = [

  {

    path: '/redirect',

    component: Layout,

    hidden: true,

    children: [

      {

        path: '/redirect/:path*',

        component: () => import('@/views/redirect/index')

      }

    ]

  },

  {

    path: '/login',

    component: () => import('@/views/login/index'),

    hidden: true

  },

  {

    path: '/404',

    component: () => import('@/views/error-page/404'),

    hidden: true

  }

component后面对应的是具体的vue文件名称及路径，也可以看看这个vue做的，智能停车场云平台视频课程，https://edu.csdn.net/course/detail/31989，

用到以下技术

  1、Vue3.x+ElementUI前后端分离技术，跨域访问，XSS防脚本注入，Node.js

  2、Springboot、Maven、Spring AOP切面实现系统日志

  3、MySql数据库、MyBatisPlus、Redis

  4、Shiro权限控制：菜单，角色及权限管理（按钮及用户级别权限）

  5、Swagger、knife4j接口文档配置

  6、Echarts图表、POI  Excel导入导出

  7、单点登录（一个用户不能在多个设备同时登录）

  8、腾讯云AI车牌识别

项目功能：

1、掌握编写云平台项目的数据库设计方法

2、综合各种停车场项目需求，灵活的收费，记时规则

3、主要功能有合作伙伴管理，停车场管理，车辆管理，财务管理，车牌识别，财务明细及统计图表，权限、菜单、角色及日志等功能

path:"/"的意思是/后面是空字符串，也就是“”，所以“/”和“/index”是同级路由。

它的子路由应该是path:"字符串"。完整显示出来是“/父级路由/子路由”。

// 新的
const routes = [
    {
        path:"/home",        // 将默认的顶级路由设置为home吧，别弄空的
        name:"***",
        component:"**",
        children:[
            {
                path:"index",            // 子路由index，显示为/home/index.
                component:"***",
            },
            {
                path:"haha",            // 子路由haha，显示为/home/haha.
                component:"***",
            },
        ],
    },
]





# 旧的
const routes = [
  {
    path: '/',
    component: Tmm,
    redirect: '/index',
  },
  {
    path:"/index",   // 顶级路由加/
    component:"**"，
    children:[
        {
            path:"haha",        //最后显示出来就是  /index/haha,这才是子路由
            component："**",
        },
    ],
  }
]

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632