Vue router url 变化但内容不变

Question

当我访问http://127.0.0.1:8080, in the browser url it shows http://127.0.0.1:8080/#/topicManagement/topicManagement 当我单击 div（它必须为 =="/topicManagement/appConfigTopic"）时，它会在浏览器 url 中路由到 http://127.0.0.1:8080/#/topicManagement/appConfigTopic，但页面内容没有改变。

我读过这个，它有相同的路由器。虽然我的有不同的路由器。

路由器配置：

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

编辑

当我切换到下面的路由器时，它显示 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
                        }
                    ]
                }

Answer 1

您应该删除子路由路径中的前置斜杠 / :

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

....

Vue router url 变化但内容不变

Vue router url changes but not the content

html

javascript

vue.js

vue-router