javascript - Vue路由器网址更改但内容没有更改

Question

当我访问http://127.0.0.1:8080时，在浏览器 url 中它显示http://127.0.0.1:8080/#/topicManagement/topicManagement 当我单击 div 时（必须 =="/topicManagement/appConfigTopic" )，它会在浏览器 url 中路由到http://127.0.0.1:8080/#/topicManagement/appConfigTopic，但页面内容不会改变。

我已阅读此单击链接会更改 URL，但不会更改具有相同路由器的页面上的内容/数据。虽然我的路由器不同。

路由器配置：

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

标签： javascripthtmlvue.jsvue-router

Answer 1

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

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

....