1.定义组件在components里面添加Menu.vue
import {createRouter, createWebHashHistory } from "vue-router";// meta里面根据需求，自己添加// title: 菜单导航, icon: 图标, show: 是否显示菜单, isFrame:是否显示窗口const routes = [{path: '/',component: () => import("@/views/Index.vue"),meta: {title: "首页", icon: "Basketball", show: true, isFrame:true}},{path: '/about',name: 'about',component: () => import("@/views/About.vue"),meta: {title: "关于我们", icon: "Box", show: true, isFrame:true },//二级菜单children: [{path: "/about/test1",name: "test1",component: () => import("@/views/Test1.vue"),meta: {title: "测试1", icon: "Cherry", show: false, isFrame:true}}, {path: "/about/test2",name: "test2",component: () => import("@/views/Test2.vue"),meta: {title: "测试2", icon: "CoffeeCup", show: true, isFrame:true}}]},{path: '/login',component: () => import("@/views/Login.vue"),meta: {title: "登录", icon: "ElemeFilled", show: false, isFrame:false }},]const router = createRouter({history: createWebHashHistory('/'),routes})export default router
2.router文件里面添加index.ts文件，添加meta
import {createRouter, createWebHashHistory } from "vue-router";// meta里面根据需求，自己添加// title: 菜单导航, icon: 图标, show: 是否显示菜单, isFrame:是否显示窗口const routes = [{path: '/',component: () => import("@/views/Index.vue"),meta: {title: "首页", icon: "Basketball", show: true, isFrame:true}},{path: '/about',name: 'about',component: () => import("@/views/About.vue"),meta: {title: "关于我们", icon: "Box", show: true, isFrame:true },// 二级菜单children: [{path: "/about/test1",name: "test1",component: () => import("@/views/Test1.vue"),meta: {title: "测试1", icon: "Cherry", show: false, isFrame:true}}, {path: "/about/test2",name: "test2",component: () => import("@/views/Test2.vue"),meta: {title: "测试2", icon: "CoffeeCup", show: true, isFrame:true}}]},{path: '/login',component: () => import("@/views/Login.vue"),meta: {title: "登录", icon: "ElemeFilled", show: false, isFrame:false }},]const router = createRouter({history: createWebHashHistory('/'),routes})export default router
3.让二级菜单在一级菜单里面显示，在两个子菜单的父项添加里面添加
<template><router-view></router-view></template><script lang="ts" setup></script>
4.跳转到一个新的页面 1.在router里面的meta添加自定义属性isFrame:true，上面已有代码 2.在主页面APP.vue里面 主页面添加v-if=“route.meta.isFrame"用if判断为true就不跳转新页面，在主页面外面添加路由出口<router−viewv−if="!route.meta.isFrame"用if判断为true就不跳转新页面，在主页面外面添加路由出口 <router-view v-if="!route.meta.isFrame"用if判断为true就不跳转新页面，在主页面外面添加路由出口<router−viewv−if="!route.meta.isFrame”> route.meta.isFrame为假，!route.meta.isFrame为假 ，!route.meta.isFrame为假，!route.meta.isFrame为真时跳转
<template><div class="common-layout" v-if="$route.meta.isFrame"><el-container><el-header class="header"><el-row :gutter="20" align="middle"><el-col :span="4"><img src="../assets/logo.svg" /></el-col><el-col :span="16" class="title"><span></span></el-col><el-col :span="4" class="user"><el-dropdown><span class="el-dropdown-link">游客<el-icon class="el-icon--right"><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item>Action 1</el-dropdown-item><el-dropdown-item>Action 2</el-dropdown-item><el-dropdown-item disabled>Action 4</el-dropdown-item><el-dropdown-item @click="logout" divided>退出</el-dropdown-item></el-dropdown-menu></template></el-dropdown></el-col></el-row></el-header><el-container><el-aside width="200px"><MenuVue></MenuVue></el-aside><el-main><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></el-main></el-container></el-container></div><router-view v-if="!$route.meta.isFrame"></router-view></template><script setup lang="ts"><!-- 导入自定义的组件 -->import MenuVue from "@/components/Menu.vue";const logout = () => {};</script><style scoped>.header {background-color: #708090;align-items: center;vertical-align: middle;padding-top: 15px;}.title {color: #fff;font-size: 20px;}.el-dropdown-link {cursor: pointer;color: #fff;display: flex;align-items: center;}.user {text-align: right;}</style>
