Vuetify中导航抽屉下Tab对应的router-view无法显示问题求助

我仔细看了你的代码和问题描述，发现问题出在路由结构设计和router-view层级配置上——你当前的根router-view只能渲染一级路由，但Tabs对应的页面属于父路由（比如/delivery）的子路由，需要嵌套路由配合组件内的子router-view才能正常显示。

第一步：配置嵌套路由结构 #

首先要修改你的Vue Router配置，给包含Tabs的父路由添加children子路由，示例如下：

const router = new VueRouter({
  routes: [
    { path: '/', name: 'home', component: Home },
    // 父路由：Delivery页面（导航抽屉点击进入的页面）
    { 
      path: '/delivery', 
      name: 'delivery',
      component: Delivery,
      // 子路由：对应Tabs的各个页面
      children: [
        { 
          path: 'addresses', 
          name: 'deliveryAddresses', 
          component: DeliveryAddresses 
        },
        { 
          path: 'parcels', 
          name: 'parcelsToPack', 
          component: ParcelsToPack 
        },
        // 默认子路由：进入/delivery时自动跳转到第一个Tab页面
        { path: '', redirect: 'addresses' }
      ]
    },
    // 其他导航抽屉对应的路由...
    { path: '/account', name: 'account', component: Account },
    { path: '/addresses', name: 'addresses', component: Addresses },
    { path: '/to-pack', name: 'showParcelsToPack', component: ShowParcelsToPack }
  ]
})

第二步：在父页面中添加子router-view #

打开你的Delivery页面组件（也就是导航抽屉中Start Delivery对应的页面），在Tabs组件下方添加<router-view>，用来渲染子路由的内容：

<template>
  <div class="delivery-page">
    <v-tabs icons-and-text centered dark color="red">
      <!-- 用命名路由跳转，比路径更可靠 -->
      <v-tab :to="{ name: 'deliveryAddresses' }">
        Addresses
        <v-icon>shopping_cart</v-icon>
      </v-tab>
      <v-tab :to="{ name: 'parcelsToPack' }">
        Parcels To Pack
        <v-icon>list</v-icon>
      </v-tab>
    </v-tabs>
    <!-- 这里是子路由的渲染容器 -->
    <router-view class="mt-4"></router-view>
  </div>
</template>

第三步：修正Tab的跳转目标 #

你之前的Tab代码里to="/delivery"是跳回父路由本身，而不是子路由，所以要改成指向对应的子路由（推荐用命名路由，避免路径拼写错误）。如果想用你data里的tabItems循环渲染Tabs，可以这样写：

<v-tabs icons-and-text centered dark color="red">
  <v-tab 
    v-for="item in tabItems" 
    :key="item.routeName"
    :to="{ name: item.routeName }"
  >
    {{ item.text }}
    <v-icon>{{ item.icon }}</v-icon>
  </v-tab>
</v-tabs>

同时确保tabItems里的routeName和路由配置中的name完全一致：

data: () => ({
  tabItems : [
    { text : 'Parcels to Pack', routeName : 'parcelsToPack', icon: 'list' },
    { text : 'Show Delivery Map', routeName : 'deliveryAddresses', icon: 'shopping_cart'},
  ]
})

为什么之前不显示？ #

原来的根router-view（在v-content里）只会渲染一级路由，当你点击Tab跳转子路由时，父路由的组件（Delivery）依然在根router-view中，但子路由的内容需要在父组件内部的router-view中才能显示——这是Vue嵌套路由的核心逻辑，必须保证路由结构和router-view的层级对应。

内容的提问来源于stack exchange，提问作者TheBAST