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