提问人：bluelemonade 提问时间：11/15/2023 最后编辑：bluelemonade 更新时间：11/15/2023 访问量：20
vuejs3 中子路由的奇怪行为
strange behaviour with child route in vuejs3
问：
当我使用子路由时，vue3 路由器有问题。子路由显示在主页上的一个组件中，这个 InfoLayer.vue 组件只是有时可见，具体取决于商店中的标志。
大致是路由器：
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import IntroView from '../gameviews/IntroView.vue'
import PuzzleView from '../gameviews/PuzzleView.vue'
var routes = [
{
path: "/homepage",
name: "homepage",
component: HomeView,
children: [
{
path: '/homepage/intro',
name: "intro",
component: IntroView
},
{
path: '/homepage/puzzle',
name: "puzzle",
component: PuzzleView
}
]
}, ...
当然，项目中还有更多的路线，而且它们都运行得很好。只有子路线不起作用，始终显示主页视图，而不是介绍或拼图。没有错误消息，即使显示不正确的视图也能正常工作。
layer.vue 组件中的部分如下所示：
<router-view v-slot="{ Component }">
<transition name="slidefade" appear mode="out-in" >
<component :is="Component" class="animated" :key="route.path" />
</transition>
</router-view>
即使在加载 IntroLayer 组件时进行额外的推送，也总是会加载主页
onMounted(() => {
setTimeout(() => {
router.push( {path:"/homepage/puzzle"} );
}, 2000);
为什么孩子没有被展示出来......
答：
0赞
yoduh
11/15/2023
#1
您的子路由当前设置为在路径为 和 时匹配（或者它们会匹配，因为它们不应该在前面加上任何一个）。查看 Vue Router 文档中关于嵌套路由的内容/homepage/homepage/intro/homepage/homepage/puzzle/
将子路由路径视为父路径的扩展。
您希望像这样定义路由：
{
path: '/homepage',
name: 'homepage',
component: HomeView,
children: [
{
path: 'intro',
name: 'intro',
component: IntroView
},
{
path: 'puzzle',
name: 'puzzle',
component: PuzzleView
}
]
}
因此，子路由现在将在路径为 或 时分别匹配。/homepage/intro/homepage/puzzle
评论
0赞
bluelemonade
11/15/2023
不幸的是，这没有帮助，/ 总是加载的。
0赞
yoduh
11/15/2023
不知道你说的“/总是加载”是什么意思。怎么会这样？另外，可能应该早点问，但是组件的模板中是否有？这是显示嵌套路由组件的唯一方法。您可能希望在问题中显示此代码。HomeView<router-view />
0赞
bluelemonade
11/15/2023
“/”表示默认路径。谢谢，这是错误，路由器视图甚至没有在正确的视图中。
评论