基于Vue 3和Vuetify的v-navigation-drawer无路由组件导航方案

核心思路是利用Vue的动态组件特性，通过一个变量控制当前渲染的组件，点击导航抽屉的菜单项时更新这个变量即可实现无路由的组件切换。

以下是完整实现示例：

模板部分 #

<template>
  <v-app>
    <!-- 导航抽屉 -->
    <v-navigation-drawer permanent width="250">
      <v-list dense>
        <v-list-item
          v-for="item in navItems"
          :key="item.name"
          :active="currentComponent === item.component"
          @click="currentComponent = item.component"
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- 主内容区：渲染当前选中的组件 -->
    <v-main>
      <component :is="currentComponent"></component>
    </v-main>
  </v-app>
</template>

脚本部分 #

<script setup>
import { ref } from 'vue'
// 导入你需要切换的自定义组件
import Home from './components/Home.vue'
import Profile from './components/Profile.vue'
import Settings from './components/Settings.vue'

// 控制当前显示的组件
const currentComponent = ref('Home')

// 导航菜单配置
const navItems = [
  { name: '首页', icon: 'mdi-home', component: 'Home' },
  { name: '个人资料', icon: 'mdi-account', component: 'Profile' },
  { name: '设置', icon: 'mdi-cog', component: 'Settings' }
]
</script>

示例组件（以Home.vue为例） #

<template>
  <v-container fluid class="pa-4">
    <h1>首页组件</h1>
    <p>这是无需路由切换的首页内容</p>
  </v-container>
</template>

关键说明 #

• 使用Vue的<component :is="currentComponent">动态渲染组件，currentComponent的值对应组件的注册名称或导入的组件对象
• 导航抽屉的v-list-item通过@click事件直接更新currentComponent，实现组件切换
• 可以通过:active="currentComponent === item.component"给当前选中的菜单项添加激活样式

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