我对 Vue 很陌生。我的应用程序有一个非常标准的布局，包括顶部导航、侧边导航、页脚和内容区域。内容区域分为两部分，左侧是树，右侧是选项卡式界面。我正在使用带有嵌套动态路由的 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。当应用加载时，使用 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>
我想要的流程如下：
- 当页面加载时，树中的第一个项目被选中。
- 当用户单击树中的父节点时，应选择右侧的第一个选项卡并加载适当的内容。它是路由器中的父路由。
- 当用户单击子负载时，应根据路由器加载第二个选项卡。
我看到树的行为正确，地址栏上显示了正确的路线。第一个选项卡的组件也正确加载。但是，当我单击叶节点时，即使正确创建了路由，选项卡也不会更新。选项卡既没有更改，也没有加载适当的组件。我尝试了各种选项，包括在选项卡中使用路由名称：to 等，但似乎没有任何效果。
任何帮助深表感谢。如果需要，我可以在 GitHub 上发布代码。