Vue router url changes but not the content

Question

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
                        }
                    ]
                }

remove prefixed "/" (slashes) and (in my opinion) you are not required to include parent routes in the child. — JTInfinite, May 18 '21 at 10:56
I want url like `/topicManagement/topicManagement`,`/topicManagement/appConfigTopic`,`/topicManagement/courseInteractTopic` — LF00, May 18 '21 at 11:00

score 1 · Accepted Answer · answered May 18 '21 at 10:49

1

You should remove the prepended slash / in the path of child routes :

...
    {
        path: '/index',
        name: 'index',
        component: index,
        redirect:'/topicManagement',
        children:[
            {
                path:'topicManagement',// not path:'/topicManagement'
                name:'topic',

....

answered May 18 '21 at 10:49

Boussadjra Brahim

82,684
19
144
164

I've set it. And it show nothing, I don't know if I write it right, so I post it in my answer above. – LF00 May 18 '21 at 11:12
you should set it for any nested (child) route – Boussadjra Brahim May 18 '21 at 11:51

Vue router url changes but not the content

1 Answers1