Why do all paths go to the page corresponding to the root path?

A newly initialized project configures routing and modifies each component to distinguish them, but it is found that each path enters the component "HelloWorld"". Is there something wrong with this configuration?

import Vue from "vue"
import Router from "vue-router"
import HelloWorld from "@/components/HelloWorld"
import HelloWorld1 from "@/components/HelloWorld1"
import HelloWorld2 from "@/components/HelloWorld2"
import HelloWorld3 from "@/components/HelloWorld3"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      
      readirect: "/HelloWorld"
    },
    {
        path: "/HelloWorld",
        component: Helloworld
    }
    {
        path: "/HelloWorld1",
        component: HelloWorld1,
        // childres:[
        //     {
        //         path: "HelloWorld3",
        //         component: HelloWorld3,
        //     },
        // ]
    },
    {
        path: "/HelloWorld2",
        component: HelloWorld2
    }
  ]
})

there is also a small problem: it seems that there is no need to configure the root path to look at the document. However, if the root path of the above code is removed, the component will not be rendered. Or do I understand something wrong?

clipboard.png

Mar.20,2021

just set mode to history mode:

const router = new VueRouter({
  mode: 'history', // require service support
  routes // ()  routes: routes
})
Menu