Vue3实现动态菜单展示，实现动态图标展示，实现跳转到一个新页面

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

3.让二级菜单在一级菜单里面显示，在两个子菜单的父项添加里面添加

<template>
   <router-view></router-view>
</template>

<script lang="ts" setup>

</script>

1
2
3
4
5
6
7
8

4.跳转到一个新的页面
1.在router里面的meta添加自定义属性isFrame:true，上面已有代码
2.在主页面APP.vue里面 主页面添加v-if=“$route.meta.isFrame"用if判断为true就不跳转新页面，在主页面外面添加路由出口<router-viewv-if="!$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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75