Vue嵌套路由的各种用法详解

更新时间：2025年01月28日 14:50:32 作者：百锦再@新空间代码工作室

在 Vue 中,嵌套路由和 Element Plus 的 Menu 组件是构建复杂单页面应用（SPA）时的常用组合,通过嵌套路由,可以实现多级页面结构,以下是结合 Vue 嵌套路由和 Element Plus Menu 的各种用法和场景的详细介绍,需要的朋友可以参考下

一、Vue 嵌套路由基础

1. 定义嵌套路由

在 Vue Router 中，嵌套路由可以通过在路由配置中定义 children 属性来实现。例如，以下是一个简单的嵌套路由配置：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue'),
  },
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue'),
    children: [
      {
        path: 'profile',
        component: () => import('./views/Profile.vue'),
      },
      {
        path: 'settings',
        component: () => import('./views/Settings.vue'),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在这个例子中，/dashboard 是父路由，/dashboard/profile 和 /dashboard/settings 是子路由。

2. 使用嵌套路由

在父组件中，可以通过来渲染子路由的组件：

<template>
  <el-menu :default-active="$route.path" router>
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/users">用户管理</el-menu-item>
    <el-sub-menu index="/dashboard">
      <template #title>仪表盘</template>
      <el-menu-item index="/dashboard/profile">个人资料</el-menu-item>
      <el-menu-item index="/dashboard/settings">设置</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

二、Element Plus Menu 基础用法

Element Plus 的 Menu 组件支持多种用法，包括水平菜单、垂直菜单、折叠菜单等。以下是一些基本用法：

1. 垂直菜单

<template>
  <el-menu :default-active="$route.path" router>
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/users">用户管理</el-menu-item>
    <el-sub-menu index="/dashboard">
      <template #title>仪表盘</template>
      <el-menu-item index="/dashboard/profile">个人资料</el-menu-item>
      <el-menu-item index="/dashboard/settings">设置</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

在这个例子中，el-menu 的 router 属性用于激活当前路由对应的菜单项。

2. 水平菜单

水平菜单可以通过设置 mode=“horizontal” 来实现：

<template>
  <el-menu mode="horizontal" :default-active="$route.path" router>
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/users">用户管理</el-menu-item>
    <el-sub-menu index="/dashboard">
      <template #title>仪表盘</template>
      <el-menu-item index="/dashboard/profile">个人资料</el-menu-item>
      <el-menu-item index="/dashboard/settings">设置</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

三、Vue 嵌套路由与 Element Plus Menu 的结合

1. 动态菜单

可以通过动态绑定数据来生成菜单项。例如，从后端获取菜单数据并渲染：

<template>
  <el-menu :default-active="$route.path" router>
    <template v-for="item in menuData" :key="item.index">
      <el-menu-item v-if="!item.children" :index="item.index">
        {{ item.label }}
      </el-menu-item>
      <el-sub-menu v-else :index="item.index">
        <template #title>{{ item.label }}</template>
        <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
          {{ child.label }}
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue';

const menuData = ref([
  { index: '/home', label: '首页' },
  { index: '/users', label: '用户管理' },
  {
    index: '/dashboard',
    label: '仪表盘',
    children: [
      { index: '/dashboard/profile', label: '个人资料' },
      { index: '/dashboard/settings', label: '设置' },
    ],
  },
]);
</script>

在这个例子中，menuData 是一个动态生成的菜单数据数组。

2. 路由模式

当与 Vue Router 结合使用时，可以通过 router 属性激活当前路由对应的菜单项。例如：

<template>
  <el-menu :default-active="$route.path" router>
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/users">用户管理</el-menu-item>
    <el-sub-menu index="/dashboard">
      <template #title>仪表盘</template>
      <el-menu-item index="/dashboard/profile">个人资料</el-menu-item>
      <el-menu-item index="/dashboard/settings">设置</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

在这个例子中，el-menu 的 router 属性会根据当前路由路径（$route.path）自动激活对应的菜单项。

3. 菜单事件处理

Element Plus 的 Menu 组件提供了多种事件，例如 select、open 和 close。可以通过这些事件来处理菜单的交互逻辑。例如：

<template>
  <el-menu :default-active="$route.path" router @select="handleSelect">
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/users">用户管理</el-menu-item>
    <el-sub-menu index="/dashboard">
      <template #title>仪表盘</template>
      <el-menu-item index="/dashboard/profile">个人资料</el-menu-item>
      <el-menu-item index="/dashboard/settings">设置</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue';

const handleSelect = (index) => {
  console.log(`Selected menu: ${index}`);
};
</script>

在这个例子中，handleSelect 方法会在菜单项被选中时触发。

四、高级用法

1. 权限控制

在实际应用中，通常需要根据用户的权限动态显示菜单项。可以通过在路由配置中添加权限属性，并在菜单渲染时进行过滤。例如：

const routes = [
  {
    path: '/home',
    component: () => import('./views/Home.vue'),
    meta: { requiresAuth: false },
  },
  {
    path: '/users',
    component: () => import('./views/Users.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue'),
    children: [
      {
        path: 'profile',
        component: () => import('./views/Profile.vue'),
        meta: { requiresAuth: true },
      },
      {
        path: 'settings',
        component: () => import('./views/Settings.vue'),
        meta: { requiresAuth: true },
      },
    ],
  },
];

然后在菜单渲染时，根据用户权限过滤菜单项：

<template>
  <el-menu :default-active="$route.path" router>
    <template v-for="item in filteredMenuData" :key="item.index">
      <el-menu-item v-if="!item.children" :index="item.index">
        {{ item.label }}
      </el-menu-item>
      <el-sub-menu v-else :index="item.index">
        <template #title>{{ item.label }}</template>
        <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
          {{ child.label }}
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const menuData = ref([
  { index: '/home', label: '首页', meta: { requiresAuth: false } },
  { index: '/users', label: '用户管理', meta: { requiresAuth: true } },
  {
    index: '/dashboard',
    label: '仪表盘',
    children: [
      { index: '/dashboard/profile', label: '个人资料', meta: { requiresAuth: true } },
      { index: '/dashboard/settings', label: '设置', meta: { requiresAuth: true } },
    ],
  },
]);

const filteredMenuData = computed(() => {
  return menuData.value.filter((item) => {
    if (!item.children) {
      return !item.meta.requiresAuth || store.state.isAuthenticated;
    } else {
      item.children = item.children.filter((child) => {
        return !child.meta.requiresAuth || store.state.isAuthenticated;
      });
      return item.children.length > 0;
    }
  });
});
</script>

在这个例子中，filteredMenuData 是一个计算属性，根据用户的认证状态（store.state.isAuthenticated）动态过滤菜单项。

2. 菜单的动态加载

在某些情况下，菜单数据可能需要从后端动态加载。可以通过异步请求获取菜单数据，并在获取完成后渲染菜单。例如：

<template>
  <el-menu :default-active="$route.path" router v-if="menuData.length > 0">
    <template v-for="item in menuData" :key="item.index">
      <el-menu-item v-if="!item.children" :index="item.index">
        {{ item.label }}
      </el-menu-item>
      <el-sub-menu v-else :index="item.index">
        <template #title>{{ item.label }}</template>
        <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
          {{ child.label }}
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const menuData = ref([]);

onMounted(async () => {
  try {
    const response = await axios.get('/api/menu');
    menuData.value = response.data;
  } catch (error) {
    console.error('Failed to load menu data:', error);
  }
});
</script>

在这个例子中，onMounted 生命周期钩子用于在组件挂载时从后端加载菜单数据。

3. 菜单的国际化

在国际化应用中，菜单项的标题可能需要根据用户的语言偏好动态显示。可以通过 Vue I18n 来实现菜单的国际化。例如：

<template>
  <el-menu :default-active="$route.path" router>
    <template v-for="item in menuData" :key="item.index">
      <el-menu-item v-if="!item.children" :index="item.index">
        {{ $t(item.label) }}
      </el-menu-item>
      <el-sub-menu v-else :index="item.index">
        <template #title>{{ $t(item.label) }}</template>
        <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
          {{ $t(child.label) }}
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const menuData = ref([
  { index: '/home', label: 'menu.home' },
  { index: '/users', label: 'menu.users' },
  {
    index: '/dashboard',
    label: 'menu.dashboard',
    children: [
      { index: '/dashboard/profile', label: 'menu.profile' },
      { index: '/dashboard/settings', label: 'menu.settings' },
    ],
  },
]);
</script>

<i18n>
{
  "en": {
    "menu": {
      "home": "Home",
      "users": "Users",
      "dashboard": "Dashboard",
      "profile": "Profile",
      "settings": "Settings"
    }
  },
  "zh": {
    "menu": {
      "home": "首页",
      "users": "用户管理",
      "dashboard": "仪表盘",
      "profile": "个人资料",
      "settings": "设置"
    }
  }
}
</i18n>

在这个例子中，$t 方法用于动态翻译菜单项的标题。

4. 菜单的折叠与展开

Element Plus 的 Menu 组件支持折叠和展开功能。可以通过设置 collapse 属性来控制菜单的折叠状态。例如：

<template>
  <div>
    <el-button @click="toggleCollapse">切换菜单</el-button>
    <el-menu :default-active="$route.path" router :collapse="isCollapsed">
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/users">用户管理</el-menu-item>
      <el-sub-menu index="/dashboard">
        <template #title>仪表盘</template>
        <el-menu-item index="/dashboard/profile">个人资料</el-menu-item>
        <el-menu-item index="/dashboard/settings">设置</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isCollapsed = ref(false);

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};
</script>

在这个例子中，isCollapsed 是一个响应式变量，用于控制菜单的折叠状态。点击按钮时，toggleCollapse 方法会切换菜单的折叠状态。

5. 菜单的自定义样式

可以通过自定义 CSS 来调整菜单的样式。例如：

.el-menu {
  background-color: #f5f7fa;
  border-right: none;
}

.el-menu-item {
  color: #333;
}

.el-menu-item.is-active {
  background-color: #409eff;
  color: #fff;
}

.el-sub-menu__title {
  color: #333;
}

.el-sub-menu__title:hover {
  background-color: #e6f7ff;
}

在这个例子中，自定义了菜单的背景颜色、字体颜色和激活状态的样式。

五、完整示例

以下是一个完整的示例，结合了嵌套路由、动态菜单、权限控制、国际化和折叠功能：

路由配置

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue'),
    meta: { requiresAuth: false },
  },
  {
    path: '/users',
    component: () => import('./views/Users.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue'),
    children: [
      {
        path: 'profile',
        component: () => import('./views/Profile.vue'),
        meta: { requiresAuth: true },
      },
      {
        path: 'settings',
        component: () => import('./views/Settings.vue'),
        meta: { requiresAuth: true },
      },
    ],
    meta: { requiresAuth: true },
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

菜单组件

<template>
  <div>
    <el-button @click="toggleCollapse">切换菜单</el-button>
    <el-menu :default-active="$route.path" router :collapse="isCollapsed">
      <template v-for="item in filteredMenuData" :key="item.index">
        <el-menu-item v-if="!item.children" :index="item.index">
          {{ $t(item.label) }}
        </el-menu-item>
        <el-sub-menu v-else :index="item.index">
          <template #title>{{ $t(item.label) }}</template>
          <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
            {{ $t(child.label) }}
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const store = useStore();

const menuData = ref([
  { index: '/home', label: 'menu.home', meta: { requiresAuth: false } },
  { index: '/users', label: 'menu.users', meta: { requiresAuth: true } },
  {
    index: '/dashboard',
    label: 'menu.dashboard',
    children: [
      { index: '/dashboard/profile', label: 'menu.profile', meta: { requiresAuth: true } },
      { index: '/dashboard/settings', label: 'menu.settings', meta: { requiresAuth: true } },
    ],
    meta: { requiresAuth: true },
  },
]);

const isCollapsed = ref(false);

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

const filteredMenuData = computed(() => {
  return menuData.value.filter((item) => {
    if (!item.children) {
      return !item.meta.requiresAuth || store.state.isAuthenticated;
    } else {
      item.children = item.children.filter((child) => {
        return !child.meta.requiresAuth || store.state.isAuthenticated;
      });
      return item.children.length > 0;
    }
  });
});
</script>

<i18n>
{
  "en": {
    "menu": {
      "home": "Home",
      "users": "Users",
      "dashboard": "Dashboard",
      "profile": "Profile",
      "settings": "Settings"
    }
  },
  "zh": {
    "menu": {
      "home": "首页",
      "users": "用户管理",
      "dashboard": "仪表盘",
      "profile": "个人资料",
      "settings": "设置"
    }
  }
}
</i18n>

样式

.el-menu {
  background-color: #f5f7fa;
  border-right: none;
}

.el-menu-item {
  color: #333;
}

.el-menu-item.is-active {
  background-color: #409eff;
  color: #fff;
}

.el-sub-menu__title {
  color: #333;
}

.el-sub-menu__title:hover {
  background-color: #e6f7ff;
}

六、总结

通过结合 Vue 嵌套路由和 Element Plus 的 Menu 组件，可以实现功能丰富且灵活的导航菜单。本文介绍了从基础用法到高级功能的多种场景，包括动态菜单、权限控制、国际化、折叠功能和自定义样式。这些功能可以根据实际需求灵活组合，以满足复杂应用的需求。

以上就是Vue嵌套路由的各种用法详解的详细内容，更多关于Vue嵌套路由用法的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React DOM diff 对比Vue DOM diff
这篇文章主要为大家介绍了React DOM diff 对比Vue DOM diff 区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
在vue-cli项目中如何使用swiper
这篇文章主要介绍了在vue-cli项目中如何使用swiper问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue Antd 输入框Input自动聚焦方式
这篇文章主要介绍了vue Antd 输入框Input自动聚焦方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
npm install -g @vue/cli安装vue脚手架报错问题(一般都能解决)
这篇文章主要介绍了npm install -g @vue/cli安装vue脚手架报错问题(一般都能解决),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue代理请求之Request failed with status code 404问题及解决
这篇文章主要介绍了vue代理请求之Request failed with status code 404问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue 两个字段联合校验之修改密码功能的实现
本文以校验两次密码的一致性应用，给出两个可变属性值的字段之间的联合校验的典型解决方案，通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现，需要的朋友一起看看吧
2021-07-07
vue如何动态修改meta的title
这篇文章主要介绍了vue如何动态修改meta的title，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue3基于script setup语法$refs的使用
这篇文章主要介绍了vue3基于script setup语法$refs的使用，<BR> 在用vue3开发项目的时候，需要调用子组件的方法，于是想着用$refs来实现，但是我是使用script setup语法糖，原先vue2的语法已经不适用了。下面我们一起进入文章看详细内容吧</P><P>
2021-12-12
Vue 非常实用的自定义指令分享
这篇文章主要介绍了Vue 非常实用的自定义指令分享，Vue自定义指令有全局注册和局部注册两种方式，在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令，下文小编给大家分享那些常用到的Vue自定义指令
2022-02-02
浅谈Vue.use到底是什么鬼
这篇文章主要介绍了浅谈Vue.use到底是什么鬼，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01