Vue router url changes but not the content

When I access http://127.0.0.1:8080, in the browser url it shows http://127.0.0.1:8080/#/topicManagement/topicManagement When I click the div(which has to="/topicManagement/appConfigTopic"), it route to http://127.0.0.1:8080/#/topicManagement/appConfigTopic in the browser url, but the page content not changs.

I have read this Click on link changes the url but not the content/data on page, which has the same router. While mine has different router.

router config:

routes: [
    {
        path: '/',
        redirect:'index',
        
    },
    {
        path: '/index',
        name: 'index',
        component: index,
        redirect:'/topicManagement',
        children:[
            {
                path:'/topicManagement',
                name:'topic',
                component:topicManagement,
                //redirect:'/topicManagement/topicManagement',
                children:[
                    {
                        path:'/topicManagement/topicManagement',
                        name:'topicManagement',
                        componment:topicManagement
                    },
                    {
                        path:'/topicManagement/appConfigTopic',
                        name:'appConfigTopic',
                        componment:appConfigTopic
                    },
                    {
                        path:'/topicManagement/courseInteractTopic',
                        name:'courseInteractTopic',
                        componment:courseInteractTopic
                    }
                ]
            }
    }
]

template

topicManagement

<template>
    <div>
        <div>
            <div>
                <span class="title">主题管理</span>
            </div>
            <div class="table">
                <router-link to="/topicManagement/appConfigTopic" class="inline cell">
                    <span>+</span>
                    <span>添加APP配置主题</span>
                </router-link>
                <router-link to="/topicManagement/courseInteractTopic" class="inline cell">
                    <span>+</span>
                    <span>添加课中互动主题</span>
                </router-link>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

Edit

when I change to below router, it show empty page for http://127.0.0.1:8080/#/topicManagement

    routes: [
        {
            path: '/',
            redirect:'index',
            
        },
        {
            path: '/index',
            name: 'index',
            component: index,
            redirect:'/topicManagement',
            children:[
                {
                    path:'topicManagement',
                    name:'topicManagement',
                    component:topicManagement,
                    //redirect:'topicManagement',
                    children:[
                        /*
                        {
                            path:'/topicManagement/topicManagement',
                            name:'topicManagement',
                            componment:topicManagement
                        },
                        */
                        {
                            path:'appConfigTopic',
                            name:'topicManagementAppConfigTopic',
                            componment:appConfigTopic
                        },
                        {
                            path:'courseInteractTopic',
                            name:'topicManagementCourseInteractTopic',
                            componment:courseInteractTopic
                        }
                    ]
                }