【前端】Vue+Element UI案例：通用后台管理系统-导航栏

【前端】Vue+Element UI案例：通用后台管理系统-导航栏

码农世界 2024-05-17 前端 63 次浏览 0个评论

文章目录

    • 目标
    • 代码
      • 0.数据
      • 1.其他准备
      • 2.结构
      • 3.动态显示数据
      • 4.主题：背景色，点击悬停效果
      • 5.去除padding
      • 6.去除下拉框
      • 7.标题
      • 8.路由跳转
      • 总代码
        • 组件CommonAside.vue
        • 文件结构
        • 参考

          参考视频： VUE项目，VUE项目实战，vue后台管理系统，前端面试，前端面试项目

          案例链接
          【前端】Vue+Element UI案例：通用后台管理系统-导航栏（视频p1-16）https://blog.csdn.net/karshey/article/details/127640658
          【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠（p17-19）https://blog.csdn.net/karshey/article/details/127652862
          【前端】Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格（p20-22）https://blog.csdn.net/karshey/article/details/127674643
          【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战（p23-25）https://blog.csdn.net/karshey/article/details/127735159
          【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表：折线图、柱状图、饼状图（p27-30）https://blog.csdn.net/karshey/article/details/127737979
          【前端】Vue+Element UI案例：通用后台管理系统-面包屑、tag栏（p31-35）https://blog.csdn.net/karshey/article/details/127756733
          【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出（p36-38）https://blog.csdn.net/karshey/article/details/127787418
          【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框（p39-42）https://blog.csdn.net/karshey/article/details/127777962
          【前端】Vue+Element UI案例：通用后台管理系统-登陆页面Login（p44）https://blog.csdn.net/karshey/article/details/127795302
          【前端】Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出（p45-46）https://blog.csdn.net/karshey/article/details/127849502
          【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由（p47-48）https://blog.csdn.net/karshey/article/details/127865621
          【前端】Vue+Element UI案例：通用后台管理系统-项目总结https://blog.csdn.net/karshey/article/details/127867638

          目标

          • 悬停效果
          • 点击效果
          • 其他：点击展开和收缩
          • 动态显示“首页”“商品管理”等
          • 有路由跳转

            其实是项目的导航栏组件。只打算看导航栏部分的可以跳过1.其他准备。

            代码

            0.数据

            我们把它单独放到一个MenuData.js中，然后用export default暴露出来。

            {
      path: '/',
      name: 'home',
      label: '首页',
      icon: 's-home',
      url: 'Home/Home'
    },
    {
      path: '/mall',
      name: 'mall',
      label: '商品管理',
      icon: 'video-play',
      url: 'MallManage/MallManage'
    },
    {
      path: '/user',
      name: 'user',
      label: '用户管理',
      icon: 'user',
      url: 'UserManage/UserManage'
    },
    {
      label: '其他',
      icon: 'location',
      children: [
        {
          path: '/page1',
          name: 'page1',
          label: '页面1',
          icon: 'setting',
          url: 'Other/PageOne'
        },
        {
          path: '/page2',
          name: 'page2',
          label: '页面2',
          icon: 'setting',
          url: 'Other/PageTwo'
        }
      ]
    }

            1.其他准备

            注意要查看官方文档：官方文档

            全局引入Element UI

            先安装Element UI：

            npm i element-ui -S

            全局引入：在main.js中

            import ElementUI from 'element-ui'
Vue.use(ElementUI)

            路由配置

            这里我们先配置Home页面（会显示导航栏的页面）。官方文档：Vue Router

            安装：这里的版本是3.6.5

            ps：可以在npm网站上查到包的所有版本，我们这里要的是3.x.x的最新版。

            npm install vue-router@3.6.5

            路由的配置：目前只配置了Main组件的

            import Vue from "vue";
import VueRouter from "vue-router";
import Main from '../Views/Main'
Vue.use(VueRouter)
const routes=[
    // 主路由
    {
        path:'/',
        component:Main
    }
]
const router = new VueRouter({
    routes
})
export default router

            目前的依赖

            当前的package.json文件的dependencies应当如下：

            "dependencies": {
    "core-js": "^3.8.3",
    "element-ui": "^2.15.10",
    "vue": "^2.6.14",
    "vue-router": "^3.6.5"
  }

            当前的main.js

            import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/index'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

            Main.vue布局结构

            要的是这个布局：

            找到对应代码：

            
  Aside
  
    Header
    Main

            把它放到Main.vue里。

            App.vue如下：

            效果：

            接下来我们写一个组件：CommonAside.vue，把导航栏写在这个组件里，再把组件放到Aside中。

            因此放了布局的Main.vue如下：

            组件CommonAside如下：

            接下来就是本文正题：导航栏。

            2.结构

            Element UI文档

            我们现在Element UI官方文档上找到类似的导航结构：就是你了！

            阅读代码，我们不难发现代码分为“展开收起”部分和“导航”部分，我们要的是导航部分。把代码对着我们的目标稍作调整得到：

            
    
        
        导航一
    
    
        
        
            分组一
            选项1
            选项2

            效果：

            3.动态显示数据

            导航栏分为一级导航栏和二级导航栏，目标中的 其他-页面1 就是二级导航栏，首页、商品管理、用户管理 都是一级导航栏。

            一级和二级的区别在于：数据中是否有children属性，如果有，那它的children属性就是二级导航。所以这里要用到计算属性。

            computed:{
   noChildren(){
       // 如果没有children则返回true,会被过滤器留下
       return this.MenuData.filter(item=>!item.children)
   },
   hasChildren(){
       return this.MenuData.filter(item=>item.children)
   }
}

            一级导航栏的循环显示：

            

 
     
     
     {{item.label}}

            效果：

            二级导航栏也是类似做法：

            
        
        
            {{subItem.label}}

            效果：

            4.主题：背景色，点击悬停效果

            再次打开文档，找到自定义颜色部分：

            显然是这里：我们把它直接复制粘贴。

            则标签如下：

            效果：就是这样！

            5.去除padding

            在浏览器中F12可知，padding是由body等标签自动带有的，我们只需要在App.vue中把它们清除即可（reset）。

            html,
body,
h3,
p {
  margin: 0;
  padding: 0
}

            6.去除下拉框

            这里我们先安装less：这样写CSS可以嵌套，更加方便。

            npm install less less-loader --save

            浏览器F12，显然有下拉框的这个类是：el-menu

            把el-menu设置成height:100vh即可。

            7.标题

            html：

            

            通用后台管理系统

            css：

            效果：

            8.路由跳转

            添加点击事件：

            

            
    {{ subItem.label }}

            js:

            clickItem(item){
   // 防止自己跳自己的报错
   if(this.$route.path!==item.path&&!(this.$route.path==='/home'&&(item.path==='/'))){
       this.$router.push(item.path)
   }
}

            不过目前只有一个路由。

            总代码

            组件CommonAside.vue

            文件结构

            参考

            VUE项目，VUE项目实战，vue后台管理系统，前端面试，前端面试项目：p1-16

转载请注明来自码农世界，本文标题：《【前端】Vue+Element UI案例：通用后台管理系统-导航栏》

百度分享代码，如果开启HTTPS请参考李洋个人博客
37815篇文章 站点 微博
每一天，每一秒，你所做的决定都会改变你的人生！

发表评论

快捷回复：

评论列表 （暂无评论，63人围观）参与讨论

还没有评论，来说两句吧...

Top