私はVueにかなり慣れていません。私のアプリには、トップ ナビゲーション、サイド ナビゲーション、フッター、およびコンテンツ領域を備えたかなり標準的なレイアウトがあります。コンテンツ エリアは 2 つに分かれており、左側にツリーがあり、右側にタブ インターフェイスがあります。ネストされた動的ルートで vue ルーターを使用しています。
TreeAndTab.vue
import Vue from 'vue'
import VueRouter from 'vue-router'
/* import DefaultLayout from '../layout/Default.vue' */
/* import TreeAndTabLayout from '../layout/TreeAndTab.vue' */
Vue.use(VueRouter)
const routes = [
{
path: '/home',
name: 'home',
meta: { layout: 'default' },
component: () => import('../pages/Home.vue')
},
{
path: '/about',
name: 'about',
meta: { layout: 'default' },
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../pages/About.vue')
},
{
path: '/dashboard',
name: 'dashboard',
meta: { layout: 'default' },
component: () => import('../pages/dashboard/dashboard.vue')
},
{
// Top level requirement goes to epic
path: '/r/:epic_id?',
//name: 'requirement',
meta: { layout: 'default' },
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../pages/requirement/Requirement.vue'),
children: [
{
path: '',
name: 'epic',
component: () => import('../pages/About.vue'),
props: true,
children: [
{
path: '/r/:epic_id/s/:story_id',
name: 'story',
component: () => import('../pages/Home.vue'),
props: true
}
]
}
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
Default.vue と TreeAndTab.vue の 2 つのレイアウトがあります。アプリが読み込まれると、Default.vue が使用され、ページはさらに TreeAndTab.vue レイアウトを読み込みます。
TreeAndTab.vue
<template>
<tree-and-tab-layout
:treeProps="treeProps"
:tabProps="tabProps"
:treeOptions="treeOptions"
>
</tree-and-tab-layout>
</template>
<script>
import TreeAndTabLayout from "../../layout/TreeAndTab.vue";
import RequirementService from "./RequirementService.js";
export default {
components: {
TreeAndTabLayout,
},
data: () => ({
treeProps: {},
tabProps: {
tabs: [
{
id: 1,
title: "epic",
route: { name: "epic" },
},
{
id: 2,
title: "story",
route: { name: "story" },
},
{
id: 3,
title: "mapping",
/* route: `/requirement/mapping/${this.$route.params.map_id}` */
},
],
},
treeOptions: {
propertyNames: {
text: "title",
},
},
}),
methods: {
getTabProps() {
return {};
},
},
created() {
this.treeProps = RequirementService.getAllRequirementsForApp();
//this.tabProps = this.getTabProps();
this.treeProps.activeNode = [
this.$route.params.epic_id || this.$route.params.story_id,
];
},
};
</script>
要件.vue
<template>
<tree-and-tab-layout
:treeProps="treeProps"
:tabProps="tabProps"
:treeOptions="treeOptions"
>
</tree-and-tab-layout>
</template>
<script>
import TreeAndTabLayout from "../../layout/TreeAndTab.vue";
import RequirementService from "./RequirementService.js";
export default {
components: {
TreeAndTabLayout,
},
data: () => ({
treeProps: {},
tabProps: {
tabs: [
{
id: 1,
title: "epic",
route: { name: "epic" },
},
{
id: 2,
title: "story",
route: { name: "story" },
},
{
id: 3,
title: "mapping",
/* route: `/requirement/mapping/${this.$route.params.map_id}` */
},
],
},
treeOptions: {
propertyNames: {
text: "title",
},
},
}),
methods: {
getTabProps() {
return {};
},
},
created() {
this.treeProps = RequirementService.getAllRequirementsForApp();
//this.tabProps = this.getTabProps();
this.treeProps.activeNode = [
this.$route.params.epic_id || this.$route.params.story_id,
];
},
};
</script>
私が望む流れは次のとおりです。
- ページが読み込まれると、ツリーの最初の項目が選択されます。
- ユーザーがツリーの親ノードをクリックすると、右側の最初のタブが選択され、適切なコンテンツが読み込まれます。ルーターの親ルートです。
- ユーザーが子ロードをクリックすると、ルーターに基づいて 2 番目のタブがロードされます。
ツリーが正しく動作し、正しいルートがアドレス バーに表示されていることがわかります。最初のタブのコンポーネントも正しく読み込まれます。ただし、リーフ ノードをクリックすると、ルートが正しく作成されていても、タブが更新されません。タブが変更されることも、適切なコンポーネントがロードされることもありません。タブ :to などでルート名を使用するなど、さまざまなオプションを試しましたが、何も機能しないようです。
どんな助けでも大歓迎です。必要に応じて、コードを GitHub に投稿できます。