[英]Vue-router nested route not loading my component page
我正在使用 Vue-router 並且我需要使用嵌套路由,所以我做了什么我寫了 Children Key word to reference for a child component page,所以我的問題是當我點擊鏈接時,我當前的 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>
嵌套路由旨在促進組件嵌套(請看第一個“圖片”)
您需要在target.vue
組件中包含<router-view>
...
如果您不想在target.vue
呈現TargetDetails.vue
內容,請不要使用children
配置並創建target.vue
頂級路由。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.