Vue开发实例（六）实现左侧菜单导航

03-07 1043阅读

左侧菜单导航

  • 一、一级菜单
  • 二、二级菜单
  • 三、三级菜单
    • 1、加入相关事件
    • 四、菜单点击跳转
      • 1. 创建新页面
      • 2. 配置路由
      • 3. 菜单中加入路由配置
      • 4、处理默认的Main窗口为空的情况
      • 五、动态左侧菜单导航
        • 1、动态实现一级菜单
        • 2、动态实现二级菜单

          一、一级菜单

          在之前的Aside.vue中去实现代码，一级菜单其实非常的简单，直接用el-menu 和el-menu-item 就行，Aside.vue代码如下：

            
    一级菜单1
    一级菜单2
    一级菜单3
  


export default {
  name: "Aside",
};

          Vue开发实例（六）实现左侧菜单导航

          1. 设置菜单背景颜色和文字颜色
            • 在el-menu中设置 background-color 和 text-color 属性
            • 设置选中后菜单文字颜色
              • 设置 active-text-color 属性，但是必须在需要生效的子菜单中设置index属性，否则不生效，先不设置index
              • 设置默认的选中菜单
                • 设置default-active为对应的index值即可
                • 比如我设置默认选中第2个菜单，第2个菜单的index为2，所以我们在el-menu中加入 default-active=“2”
                • 在菜单中加入图标
                  • 用 i 标签即可，在菜单名前面加入 ，XXX是图标的名称。

          效果如图所示：

          Vue开发实例（六）实现左侧菜单导航

          一级菜单全部代码

            
    一级菜单1
    一级菜单2
    一级菜单3
  


export default {
  name: "Aside",
};


.el-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

          二、二级菜单

                  
            
                一级菜单1
                选项1
                选项2
            
            一级菜单2
            一级菜单3

          修改步骤：

          1. 将 el-menu 修改为 el-submenu
          2. 按钮名称、图标用 template 标签包裹，必须加入 slot="title"属性，否则菜单样式不对。
          3. 加入新的两个 el-menu-item。

          Vue开发实例（六）实现左侧菜单导航

          参考代码：

          由于之前挖过一个坑，就是global.css里面的height，之前也提到过，所以要设置一下，el-submenu的高度，具体的参考代码

            
    
      
        一级菜单1
        选项1
        选项2
      
      一级菜单2
      一级菜单3
    
  


export default {
  name: "Aside",
};


.el-submenu {
  height: auto;
}
.el-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

          三、三级菜单

          跟二级菜单的修改方式是一样的，就是多加一层

          Vue开发实例（六）实现左侧菜单导航

          参考代码：

            
    
      
        一级菜单1
        
          选项1
          选项1-1
          选项1-2
        
        
          选项2
          选项2-1
          选项2-2
        
      
      一级菜单2
      一级菜单3
    
  


export default {
  name: "Aside",
};


.el-submenu {
  height: auto;
}
.el-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

          1、加入相关事件

          打开open、关闭close、选择select 3个事件

          在el-menu中加入三个事件属性，并编写对应的method

          Vue开发实例（六）实现左侧菜单导航

          全部参考代码：

            
    
      
        一级菜单1
        
          选项1
          选项1-1
          选项1-2
        
        
          选项2
          选项2-1
          选项2-2
        
      
      一级菜单2
      一级菜单3
    
  


export default {
  name: "Aside",
  methods: {
    handleOpen(key, keyPath) {
      console.log("打开：", key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log("关闭：", key, keyPath);
    },
    handSelect(key, keyPath) {
      console.log("选择：", key, keyPath);
    },
  },
};


.el-submenu {
  height: auto;
}
.el-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

          四、菜单点击跳转

          当点击菜单项，能够在右边的Main窗口中显示对应的页面。

          1. 创建新页面

          在 Main/ 文件夹下创建三个页面，如图所示

          Vue开发实例（六）实现左侧菜单导航

          代码如下:

              
       这是Main1
    


    export default {
        name: "Main1"
    }

          2. 配置路由

          • 安装配置路由
          • 在src下创建 router/index.js
          • 创建了主路由index，就是进入的主页面
          • 这3个index子路由，用来跳转，分别对应 main1、main2、main3 几个页面。
          • 子路由的跳转位置为，index的Main位置，因为我们管理系统只需要Main位置发生改变，头部、左边导航、下方footer是不需要改变的。

            安装路由

            npm install vue-router@3.5.2

            注意：

            • vue2搭配vue-router3
            • vue3搭配vue-router4

              在main.js中注册router，让路由生效

              Vue开发实例（六）实现左侧菜单导航

              router/index.js代码如下：

              import VueRouter from "vue-router"
import Index from "@/components/Index";
const routes = [
    //一级路由
    {
        path: '/index',
        name: 'index',
        component: Index,
        //路由嵌套
        children:[
            {path: '/index/menu1',component: () => import('@/components/Main/Main1.vue')},
            {path: '/index/menu2',component: () => import('@/components/Main/Main2.vue')},
            {path: '/index/menu3',component: () => import('@/components/Main/Main3.vue')}
        ]
    }
]
const router = new VueRouter({
    mode:'history',
    routes
})
export  default router;

              在原来的Index.vue页面，设置路由跳转位置，这里我们在原来的位置修改位 router-view即可。

              Vue开发实例（六）实现左侧菜单导航

              3. 菜单中加入路由配置

              • 这里我们使用一级菜单，简单方便，修改Aside/index.vue的代码。
              • 在el-menu里面加入 router属性
              • 在el-menu-item 的index，设置对应的子路由

                代码参考如下：

                  
    
      一级菜单1
      一级菜单2
      一级菜单3
    
  


export default {
  name: "Aside",
};


.el-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

                我们进入index主路由，发现页面是空的

                Vue开发实例（六）实现左侧菜单导航

                点击左侧导航菜单，就会有对应的页面内容

                Vue开发实例（六）实现左侧菜单导航

                4、处理默认的Main窗口为空的情况

                设置默认的跳转位置，设置如下：

                • 在子路由中添加一个新的路由，用来默认跳转
                • 在主路由中配置redirect 值为这个子路由

                  router/index.js的代码如下

                  import VueRouter from "vue-router"
import Index from "@/components/Index";
const routes = [
    //一级路由
    {
        path: '/index',
        name: 'index',
        component: Index,
        redirect: 'index/Main',
        //路由嵌套
        children:[
            {path: '/index/Main',component: () => import('@/components/Main/index.vue')},
            {path: '/index/menu1',component: () => import('@/components/Main/Main1.vue')},
            {path: '/index/menu2',component: () => import('@/components/Main/Main2.vue')},
            {path: '/index/menu3',component: () => import('@/components/Main/Main3.vue')}
        ]
    }
]
const router = new VueRouter({
    mode:'history',
    routes
})
export  default router;

                  其实就是一个重定向的操作，当直接输入index路由时就会默认跳转到Main路由里面，这样就会有个默认的页面了。

                  下方我们在地址栏只输入到index，敲回车后，会在后面默认加上 “/Main”，直接重定向了，同时Main窗口的页面也显示了我们指定的页面。

                  Vue开发实例（六）实现左侧菜单导航

                  五、动态左侧菜单导航

                  在项目中，比较多见的是会将菜单存储到后台的数据库中，通过返回数据来决定菜单的模样，并不是由前端来控制菜单的模样，所以就来实现动态的菜单导航，根据后台数据来生成菜单导航。

                  Vue开发实例（六）实现左侧菜单导航

                  1、动态实现一级菜单

                  分析上述代码，其中代码 一级菜单1 是比较相似的，不同的地方有3个：

                  • index 表示路由的path
                  • 图标的名称
                  • 菜单的名称

                    基于以上几个不同，我们可以考虑设置一个数组，数组的元素包含 路由路径、图标名、菜单名等几个属性，然后以循环的方式来输出这个菜单。

                    实现代码：

                      
    
      
        {{ item.name }}
      
    
  


export default {
  name: "Aside",
  data() {
    return {
      menu_data: [
        {
          name: "一级菜单1",
          icon: "el-icon-location",
          path: "/index/menu1",
        },
        {
          name: "一级菜单2",
          icon: "el-icon-document",
          path: "/index/menu2",
        },
        {
          name: "一级菜单3",
          icon: "el-icon-setting",
          path: "/index/menu3",
        },
      ],
    };
  },
};


.el-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
                    1. 菜单数据menu_data包含3个元素，每个元素分别有name、icon和path属性，这个三个属性分别对应菜单名、图标、路由的路径。
                    2. 使用v-for循环menu_data，填入对应的属性就可。

                    2、动态实现二级菜单

                    在一级菜单的数据对象里面加入 child 属性，这个属性也是跟现在的菜单数据menu_data一样的，

                    child也是一个数组，包含多个元素，每个元素分别有name、icon和path属性，这个三个属性分别对应菜单名、图标、路由的路径。

                    Vue开发实例（六）实现左侧菜单导航

                    参考代码：

                      
    
      
        {{ item.name }}
        
          {{ child.name }}
        
      
    
  


export default {
  name: "Aside",
  data() {
    return {
      menu_data: [
        {
          name: "一级菜单1",
          icon: "el-icon-location",
          path: "/index/menu1",
          child: [
            {
              name: "二级菜单1-1",
              icon: "el-icon-user",
              path: "/index/menu11",
            },
            {
              name: "二级菜单1-2",
              icon: "el-icon-user-solid",
              path: "/index/menu12",
            },
          ],
        },
        {
          name: "一级菜单2",
          icon: "el-icon-document",
          path: "/index/menu2",
          child: [
            {
              name: "二级菜单2-1",
              icon: "el-icon-star-on",
              path: "/index/menu21",
            },
            {
              name: "二级菜单2-2",
              icon: "el-icon-star-off",
              path: "/index/menu22",
            },
          ],
        },
        {
          name: "一级菜单3",
          icon: "el-icon-setting",
          path: "/index/menu3",
          child: [
            {
              name: "二级菜单3-1",
              icon: "el-icon-s-help",
              path: "/index/menu31",
            },
            {
              name: "二级菜单3-2",
              icon: "el-icon-help",
              path: "/index/menu32",
            },
          ],
        },
      ],
    };
  },
};


.el-submenu{
  height: auto;
}
.el-icon-help,
.el-icon-s-help,
.el-icon-star-off,
.el-icon-star-on,
.el-icon-user-solid,
.el-icon-user,
.el-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
VPS购买请点击我

文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

目录[+]