Vue3如何加载动态菜单

动态菜单加载原理

在Vue3上实现动态菜单加载的方法很简单：通过后台API获取菜单数据，然后在前端进行渲染。可以将后台API返回的菜单数据存在一个全局的对象中，然后在Vue实例中运用computed属性的计算特性来获取该全局变量中的菜单数据并渲染到页面上。下面是一个简单的实现示例：

      // 存放菜单数据的全局变量
      var menuData=[
        { name: "首页", url: "" },
        { name: "产品", url: "" },
        {
          name: "服务",
          url: "",
          children: [
            { name: "售后服务", url: "" },
            { name: "技术支持", url: "" }
          ]
        },
        { name: "关于我们", url: "" }
      ];
      // Vue实例
      var vm=new Vue({
        el: "#app",
        data: {
        },
        computed: {
          menus: function() {
            return menuData;
          }
        }
      });
    

动态菜单如何渲染到页面上

在Vue3中，可以通过v-for指令来遍历数组，然后在模板中使用动态绑定语法来动态生成菜单，示例代码如下：

      

        

          

            {{ menu.name }}
            

              

                {{ submenu.name }}
              
            
          
        
      
    

如何通过路由实现动态菜单高亮

在Vue3中，可以通过路由来实现菜单的高亮显示。通过使用Vue Router组件库来定义路由信息，然后同时使用Vue Router中的active-class属性和动态绑定语法来实现选中菜单的状态的切换，示例代码如下：

      import { createRouter, createWebHashHistory } from "vue-router";

      const router=createRouter({
        history: createWebHashHistory(),
        routes: [
          {
            path: "/",
            name: "Home",
            component: Home
          },
          {
            path: "/about",
            name: "About",
            component: About
          }
        ]
      });

      
        首页
      
      
        关于我们
      
    

如何处理菜单的点击事件

通过在路由配置中的meta属性中添加自定义信息来指示该路由是否需要特定的菜单项进行支持，然后利用router.beforeEach()方法来进行点击事件的控制。具体代码如下：

      router.beforeEach((to, from, next)=> {
        // 获取当前路由下的菜单名
        var curMenuName=to.name;
        // 查找菜单数据中对应的项
        var curMenu=menuData.find(function(menu) {
          return menu.name==curMenuName;
        });
        // 如果菜单项没有子项，则直接跳转到对应的路由
        if (!curMenu.children) {
          next();
          return;
        }
        // 如果子项中没有任何一个子项跟目标路由匹配，则跳转到子项中的第一个子路由
        var childMenuNames=curMenu.children.map(function(submenu) {
          return submenu.name;
        });
        if (!childMenuNames.includes(to.name)) {
          next({ name: curMenu.children[0].name });
        } else {
          next();
        }
      });
    

动态菜单实现总结

在Vue3中实现动态菜单加载需要通过后台API获取菜单数据，并将获取到的菜单数据存储在全局变量中进行操作。接着，在Vue实例中运用computed属性的计算特性来获取该全局变量中的菜单数据并渲染到页面上。同时，还可以利用Vue Router的active-class属性和动态绑定语法来实现选中菜单的状态的切换，通过在路由配置中的meta属性中添加自定义信息来指示该路由是否需要特定的菜单项进行支持，利用router.beforeEach()方法来进行点击事件的控制。