当我访问 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,但页面内容没有改变。
我已阅读此 Click on link changes the url but not the content/data on page,它具有相同的路由器。虽然我的路由器不同。
路由器配置:
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
}
]
}
答案 0 :(得分:1)
您应该删除子路由路径中的前置斜线 /
:
...
{
path: '/index',
name: 'index',
component: index,
redirect:'/topicManagement',
children:[
{
path:'topicManagement',// not path:'/topicManagement'
name:'topic',
....