Vue 三级路由/about/contact/phone无效，请问如何修改？

Question

这是我的路由文件，设置了三级路由，无法正确跳转

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

// 引入组件
import home from "./modules/home.vue";
import about from "./modules/about.vue";
import Phone from "./modules/Phone.vue";
import Contact from "./modules/Contact.vue";

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
    {
        path:"/home",
        component: home,
        children:[
            {
                path:'/home/contact',
                name:'contactLink',
                component:Contact
            }
        ]
    },
    {
        path: "/about",
        component: about,
        children:[
            //表示about页面中默认跳转到/about/contact 这个路由页面下。
            {
                path:'/about/contact',
                name:'contactLink',
                // redirect:'/personName',
                component: Contact,
                children:[
                    // 在/about/contact页面中默认展现三级路由personName 的内容。
                    {
                        path:'/phone',
                        name:"phoneNumber",
                        component: Phone
                    }
                ]
            }
        ]
    },
    // 重定向
    {
        path: '/',
        redirect: '/home'
    }
];

let router =  new VueRouter({
    routes,
    mode: "history"
});

export default router;

Answer 1

{
        path: "/about",
        component: about,
        children:[
            //表示about页面中默认跳转到/about/contact 这个路由页面下。
            {
                path:'contact',
                name:'contactLink',
                // redirect:'/personName',
                component: Contact,
                children:[
                    // 在/about/contact页面中默认展现三级路由personName 的内容。
                    {
                        path:'phone',
                        name:"phoneNumber",
                        component: Phone
                    }
                ]
            }
        ]
    }