我正在使用 Vue-router 并且我需要使用嵌套路由,所以我做了什么我写了 Children Key word 以引用子组件页面,所以我的问题是当我点击链接我当前的 URL 替换为嵌套路由和有一个 ID 但没有加载我的组件,当我将 Router-Linke 更改为另一个未嵌套的组件时,它将加载组件,所以我问我的错误是什么?
路由.js
{
path: '/targets',
name: 'target',
component: () =>
import ( /* webpackChunkName: "target" */ '@/views/admin/Target.vue'),
meta: {
middleware: [
auth
],
title: "Targets"
},
children:[
{
path: '/targets/:id/details',
name: 'target-details',
props: true,
component: () =>
import ( /* webpackChunkName: "target" */ '@/views/admin/TargetDetails.vue'),
meta: {
middleware: [
auth
],
title: "TargetDetails"
}
},
]
},
目标.vue
<template>
<div>
<li class="clearfix" v-for="domain in domains" :key="domain.domain_id">{{ domain.domain }}
<router-link class="more"
:to="{
name: 'target-details',
params: {
id: domain.domain_id
}
}" >Target details <i class="fa fa-angle-right"></i>
</router-link>
</li>
</div>
</template>
目标细节.vue
<template>
<div class="page-output">
<h1>Target Details</h1>
</div>
</template>
最佳答案
Nested routes旨在促进组件嵌套(看第一张“图片”)
您需要包含 <router-view>
在您的 target.vue
零件...
如果您不想要 TargetDetails.vue
的内容内部渲染 target.vue
, 不要使用 children
配置并制作 target.vue
而是顶级路线。
关于javascript - Vue-router嵌套路由未加载我的组件页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59628964/