我使用 Vuetify 開發 Vue2 應用程式。我router-view用來導航到視圖。我創建了導航抽屜，在其中添加了組和子組。我為每個子組創建了單獨的視圖，例如。AFRrev.vue對于 subgroup Revenues，AFRstats.vue對于 subgroup Stats，對于 SFR，CLC 等也是如此。我想要做的是在選擇子組時導航到特定視圖。我添加了圖片以顯示它現在的樣子：
問題是我需要將路由添加到（在子組中）中的屬性:to，v-list-item它指的是組的名稱 - 然后我將能夠創建一個路徑字串，例如。route: this.allGroupItems.text 'rev'應該給出查看AFRrev路線AFRrev.vue。如您所見，我嘗試檢索通過的路線的名稱，allGroupItems.text但它不起作用。是的，我在 vue 路由器中正確定義了所有路由。
以下是我的觀點的例子：
AFRrev.vue
<template>
<v-container>
Some data
</v-container>
</template>
<script>
export default {
}
</script>
AFRstats.vue
<template>
<v-container>
Some edata
</v-container>
</template>
<script>
export default {
}
</script>
這是主要代碼：
抽屜.vue
<template>
<v-navigation-drawer app width="215">
<v-list>
<v-list-group
v-for="item in allGroupItems"
:key="item.id">
<template v-slot:activator>
<v-list-item-title >
{{ item.text }}
</v-list-item-title>
</template>
<v-list-item
v-for="item in allSubgroupItems"
:key="item.id"
:to="item.route"
link>
<v-list-item-content>
<v-list-item-title> {{ item.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
<v-navigation-drawer>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {
allGroupItems: [
{ id: 1, text: "AFR"},
{ id: 2, text: "SFR"},
{ id: 3, text: "CBR"},
{ id: 4, text: "CLC"}
],
allSubgroupItems: [
{ id: 1.1, text: "Revenues", route: this.allGroupItems.text 'rev' },
{ id: 2.1, text: "Stats", route: this.allGroupItems.text 'stats' }
],
}
},
}
</script>
如何參考組名來創建路由路徑？也許我應該以某種方式參考組件名稱？
uj5u.com熱心網友回復：
<v-list-item>嵌套在內部<v-list-group>，因此您應該能夠item從<v-list-group>內部訪問<v-list-item>，這將使您能夠在模板中正確構建您的路線。
您不能這樣做的原因是，當您在 中迭代時<v-list-item>，您item再次使用了覆寫item變數 from的名稱<v-list-group>。
如果您在 and 中將變數重命名為更具item描述性的名稱，您應該能夠執行以下操作：<v-list-group><v-list-item>
<v-list-group
v-for="groupItem in allGroupItems"
:key="groupItem.id">
<template v-slot:activator>
<v-list-item-title >
{{ groupItem.text }}
</v-list-item-title>
</template>
<v-list-item
v-for="subItem in allSubgroupItems"
:key="subItem.id"
:to="groupItem.text subItem.route"
link>
<v-list-item-content>
<v-list-item-title> {{ subItem.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/531631.html