重用 VueJS 中的现有选项卡，通过 Vue Router 路由到子路由和孙路由

Question

我有一个 VueJS 应用程序，我想在路由到孙子路由时重用当前选项卡。子组件定义为选项卡的初始路径，当我路由到 GrandChild 路由时，我希望保留在该选项卡上。目前，当我使用 Router-link 进行重定向时，它将选项卡绘制为活动选项卡，但显示子组件而不是孙子组件。我的路由器视图<router-view></router-view> 包括选项卡以及标题对象。如何设置路由器链接以重定向到孙子组件？

routes.js

{
  name: "parent",
  path: "/parent/:parentId(\\d+)",
  props: function(route) {
  let parentId = null;
  if (route.constructor === Array) {
        parentId = route[0].params.parentId;
  } else {
        parentId = route.params.parentId;
  }

  return {
        parentId: Number(parentId)
  };
},
  component: Parent,
  children: [
  {
    name: "child",
    path: "child",
    component: Child, 
    children: [
        {
        name: "grandchild",
        path: "grandchild/:grandchildId(\\d+)",
        props: function(route) {
        return { grandchildId: Number(route.params.grandchildId) };
        },
        component: GrandChild
        }
    ]
}

选项卡是根据传递给选项卡组件的数组动态创建的。

Tabs.vue

    <v-tabs background-color="primary" dark>
        <v-tab v-for="tab in tabs"
            :key="tab.id"
            replace
            :to="{
              path: tab.path
            }"
            >{{tab.name}}</v-tab
        >
    </v-tabs>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    }
  }
}
</script>

这是父组件的简化版本。它实际上只是显示一些基本信息，然后绘制选项卡。

Parent.vue

<template>
  <v-container>
    
    <v-row>
      <v-col sm4>
        <v-card>
            <v-row no-gutters>
              <v-col>
                  HEADER HERE
              </v-col>
            </v-row>
        </v-card>
        <atomic-tabs :tabs="tabs"/> 
        <router-view></router-view>   
      </v-col>
    </v-row>
  </v-container>
</template>
<script>

import axios from "axios";
import Tabs from "@/components/Tabs";

export default {
  components: {
    "tabs": Tabs
  },
  props: {
    parentId: {
      type: Number
    }
  },
  data() {
    return {
      pageName: "Parent",
      tabs: [
        { id: 1, name: "child", path: `/parent/${this.parentId}/child`}
      ]
    };
  }
</script>

Answer 1

我认为你有一个非常直截了当的问题 - 你嵌套了两次。

选项 1

您需要在子组件中使用另一个 <router-view/> 才能看到具有当前路由配置的孙子（然后使用 v-show 或类似的东西隐藏子内容）

选项 2

或者，您可以更改构建子路由和孙路由的方式，不要嵌套它们：

{
  name: "parent",
  path: "/parent/:parentId(\\d+)",
  props: function(route) {
  let parentId = null;
  if (route.constructor === Array) {
        parentId = route[0].params.parentId;
  } else {
        parentId = route.params.parentId;
  }

  return {
        parentId: Number(parentId)
  };
},
  component: Parent,
  children: [
   {
    name: "child",
    path: "child",
    component: Child, 
   },
   {
    name: "grandchild",
    path: "child/grandchild/:grandchildId(\\d+)",
    props: function(route) {
    return { grandchildId: Number(route.params.grandchildId) };
     },
    component: GrandChild
   }
 
}

无论哪种方式，路由器链接都是：

:to="{name:'grandchild', params:{grandchildId:'134551}}"

或

:to="'child/grandchild/${'123431')'"