记录vue-router使用嵌套路由，子路由页面不显示问题

#记录vue-router使用嵌套路由，子路由页面不显示问题

App.vue

<template>
  <div>
	<router-link to="/home" tag="button">home页面</router-link>
	<router-view></router-view>
  <div>
<template>

Router/index.js

const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const routes = [
  {
    
    
    path: '/home',
    component: Home,
    children: [
      {
    
    
        path: '/news',
        component: HomeNews
      },
      {
    
    
        path: '/message',
        component: HomeMessage
      }
    ]
  }
]

Home.vue

<template>
  <div>
    <h2>我是首页</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view/>
  </div>

</template>

HomeNews.vue

<template>
  <div>
    <ul>
      <li>重大新闻！！！</li>
      <li>重大新闻！！！</li>
      <li>重大新闻！！！</li>
      <li>重大新闻！！！</li>
      <li>重大新闻！！！</li>
    </ul>
  </div>
</template>

HomeMessage.vue

<template>
  <div>
    <ul>
      <li>好消息！！！好消息！！！</li>
      <li>好消息！！！好消息！！！</li>
      <li>好消息！！！好消息！！！</li>
      <li>好消息！！！好消息！！！</li>
      <li>好消息！！！好消息！！！</li>
      <li>好消息！！！好消息！！！</li>
    </ul>
  </div>
</template>

点击子路由【新闻】或【消息】没有反应，经过多次尝试，最终通过删除路由配置中子路由path的第一个斜杠成功运行

修改后的Router/index.js

  {
    
    
    path: '/home',
    component: Home,
    children: [
      {
    
    
        //子路由地址配置，前不要加斜杠！！！
        path: 'news',
        component: HomeNews
      },
      {
    
    
        path: 'message',
        component: HomeMessage
      }
    ]
  }

当前项目vue版本为2.6.14、vue-router版本为3.5.3
有个地方可能容易写错，就是调用地址 /home/news 千万别忘记home前的斜杠哦！