vue.js Router nested routes

<template>
  <div class="home">
    <h1>Home</h1>
    <router-link to="/home/news">News</router-link> // Note that you must write the full path here. You cannot just write /news. You need to add /home
    <router-link to="/home/message">Information class</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: "Home",
};
</script>

<style scoped>

</style>

<template>
  <div class="homeNews">
    <ul>
      <li>News 1</li>
      <li>News 2</li>
      <li>News 3</li>
      <li>News 4</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeNews"
}
</script>

<style scoped>

</style>

<template>
  <div class="homeMessage">
    <ul>
      <li>Message 1</li>
      <li>Message 2</li>
      <li>Message 3</li>
      <li>Message 4</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeMessage"
}
</script>

<style scoped>

</style>

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// Here we still use routing lazy loading const Home = () => import('../views/Home')
const HomeNews = () => import('../views/HomeNews')
const HomeMessage = () => import('../views/HomeMessage')

const routes = [
  {
    path: "/home",
    name: "Home",
    component: Home,
    // How to write child routes children: [
      {
        path: "news",
        name: "HomeNews",
        component: HomeNews
      },
      {
        path: "message",
        name: "HomeMessage",
        component: HomeMessage
      },
    ]
  },
  {
    path: "",
    redirect: "home"
  }
];

const router = new VueRouter({
  routes,
  mode: 'history',
});

export default router;

const routes = [
  {
    path: "/home",
    name: "Home",
    component: Home,
    children: [
      {
        path: "news",
        name: "HomeNews",
        component: HomeNews
      },
      {
        path: "message",
        name: "HomeMessage",
        component: HomeMessage
      },
      // Add an empty sub-route {
        path: "",
        redirect: "news"
      }
    ]
  },

  {
    path: "",
    redirect: "home"
  }
];