vue菜单

最新推荐文章于 2024-07-05 17:10:40 发布
最新推荐文章于 2024-07-05 17:10:40 发布
阅读量503 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SummerWeisy/article/details/110225205
版权

记录vue菜单：

<!-- 路由配置router.js-->

import Vue from "vue";
import VueRouter from "vue-router";
import Home from '@/views/home';

Vue.use(VueRouter);

const routes = [
  {
    path: "/login",
    name: "login",
    component: () =>
      import ("../views/login.vue"),
  },
  {
    path: "/user",
    name: "user",
    component: Home,
    hidden: true,
    children: [
      {
        path: '/user/center',
        name: 'center',
        meta: { title: '个人中心', navTitle:"个人中心", icon: 'menu-monitor.svg', affix: true, noCache: true },
        component: (resolve) => require(['@/views/resetPass'], resolve)
      }
    ]
  },
  {
    path: '/',
    component: Home,
    hidden: true,
    redirect: '/monitor/index',
    children: [
      {
        path: '/monitor/index',
        name: 'index',
        meta: { title: '监控大厅', navTitle:"风机生产应用生态系统与基建设施监控仪表盘", icon: 'menu-monitor.svg', affix: true, noCache: true },
        component: (resolve) => require(['@/views/index'], resolve)
      }
    ]
  },
  {
    path: '/monitor',
    name: "监控",
    meta: {title: "监控", navTitle:"监控", icon: "menu-monitor.svg", noCache: true},
    hidden: false,
    redirect: "noredirect",
    component: Home,
    children: [
      {
        path: "/monitor/index",
        name: "index",
        meta: {title: "监控大厅", navTitle:"风机生产应用生态系统与基建设施监控仪表盘", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/index'], resolve)
      },
      {
        path: "detail",
        name: "detail",
        meta: {title: "详细", navTitle:"监控详情", icon: "", noCache: true},
        hidden: true,
        component: (resolve) => require(['@/views/details2'], resolve)
      },
      {
        path: "/processList",
        name: "processList",
        meta: {title: "", navTitle:"", icon: "", noCache: true},
        hidden: true,
        component: (resolve) => require(['@/views/processList'], resolve)
      }
    ]
  },
  {
    path: '/warning',
    name: "告警",
    meta: {title: "告警", navTitle:"告警", icon: "menu-warning.svg", noCache: true},
    hidden: false,
    redirect: "noredirect",
    component: Home,
    children: [
      {
        path: "/warning/history",
        name: "history",
        meta: {title: "告警历史", navTitle:"告警历史", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/history'], resolve)
      }
    ]
  },
  {
    path: '/endpoint',
    name: "设备库",
    meta: {title: "设备库", navTitle:"设备库", icon: "menu-endpoint.svg", noCache: true},
    hidden: false,
    redirect: "noredirect",
    component: Home,
    children: [
      {
        path: "/endpoint/siteTree",
        name: "siteTree",
        meta: {title: "站点设备库", navTitle:"站点设备库", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/siteTree/siteTree'], resolve)
      },
      {
        path: "/endpoint/worldMap",
        name: "worldMap",
        meta: {title: "网络链路负载", navTitle:"网络链路负载", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/worldMap/worldMap'], resolve)
      }
    ]
  },
  {
    path: '/analysis',
    name: "分析",
    meta: {title: "分析", navTitle:"分析", icon: "menu-analysis.svg", noCache: true},
    hidden: false,
    redirect: "noredirect",
    component: Home,
    children: [
      {
        path: "/analysis/report",
        name: "report",
        meta: {title: "报表", navTitle:"报表", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/report'], resolve)
      },
      {
        path: "/analysis/monthReport",
        name: "monthReport",
        meta: {title: "月报", navTitle:"月报", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/reportPdf'], resolve)
      }
    ]
  },
  {
    path: '/manage',
    name: "管理",
    meta: {title: "管理", navTitle:"管理", icon: "menu-manage.svg", noCache: true},
    hidden: false,
    redirect: "noredirect",
    component: Home,
    children: [
      {
        path: "/manage/userManage",
        name: "userManage",
        meta: {title: "用户管理", navTitle:"用户管理", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/manage/userManage'], resolve)
      },
      {
        path: "/manage/userGroupManage",
        name: "userGroupManage",
        meta: {title: "用户组管理", navTitle:"用户组管理", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/manage/userGroupManage'], resolve)
      },
      {
        path: "/manage/templateManage",
        name: "templateManage",
        meta: {title: "配置管理", navTitle:"配置管理", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/templateManage/templateManage'], resolve)
      },
      {
        path: "/manage/schedule",
        name: "schedule",
        meta: {title: "值班日历", navTitle:"值班日历", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/manage/schedule'], resolve)
      },
      {
        path: "/manage/shiftManage",
        name: "shiftMange",
        meta: {title: "值班时间管理", navTitle:"值班时间管理", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/manage/shiftManage'], resolve)
      },
      // {
      //   path: "/manage/monitor",
      //   name: "monitor",
      //   meta: {title: "监控对象管理", navTitle:"监控对象管理", icon: "", noCache: true},
      //   hidden: false,
      //   component: (resolve) => require(['@/views/manage/monitor'], resolve)
      // },
      {
        path: "/manage/integrate",
        name: "integrate",
        meta: {title: "报表设定管理", navTitle:"报表设定管理", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/manage/integrate'], resolve)
      },
      {
        path: "/manage/availability",
        name: "availability",
        meta: {title: "利用率分析阈值管理", navTitle:"利用率分析阈值管理", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/manage/availability'], resolve)
      },
      {
        path: "/manage/apiAlive",
        name: "apiAlive",
        meta: {title: "API探活管理", navTitle:"API探活管理", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/manage/apiAlive'], resolve)
      },
      {
        path: "/manage/warringmanage",
        name: "warringmanage",
        meta: {title: "语音通知设定", navTitle:"语音通知设定", icon: "", noCache: true},
        hidden: false,
        component: (resolve) => require(['@/views/manage/warringmanage'], resolve)
      }
    ]
  },
  {
    path: "/historyProcess",
    name: "historyProcess",
    meta: {title: "", navTitle:"", icon: "menu-manage.svg", noCache: true},
    hidden: true,
    component: () =>
      import ("../views/historyProcess.vue"),
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.path !== "/login") {
    let login = localStorage.getItem("login") || false;
    if (login) {
      next();
    } else {
      next({
        path: "/login"
      });
    }
  } else {
    next();
  }
});
export default router;

<!--store-->

import Cookies from 'js-cookie';

const state = {
  sidebar: {
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false
  },
  monitor: {
    viewId: "",
    editor: false
  }
}

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  SELECT_VIEW: (state, viewId) => {
    state.monitor.viewId = viewId;
  },
  TOGGLE_INDEX_EDIT: (state, editor) => {
    state.monitor.editor = editor;
  }
}

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  selectView({ commit }, viewId) {
    commit('SELECT_VIEW', viewId)
  },
  toggleIndexEdit({ commit }, editor) {
    commit('TOGGLE_INDEX_EDIT', editor)
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

<!-- 菜单-->

<template>
  <el-container>
    <div class="controlPanel-sidebar" width="205px">
      <div class="main-title" v-if="!isCollapse"><div class="title">监控云平台</div></div>
      <div class="title-icon" v-if="isCollapse" style="width:60px;">></div>
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-menu class="el-menu-vertical-demo"
                 :default-active="$route.path"
                 @open="handleOpen"
                 @close="handleClose"
                 :collapse="isCollapse"
                 :router=true
                 :unique-opened=true
                 background-color="rgb(32,34,42)"
                 text-color="rgba(255, 255, 255, 0.8)"
                 active-text-color="#fff">
          <el-submenu v-for="(item, index) in menuData" :key="index" :index="index+''">
            <template slot="title">
              <img class="menu-icon" :src="require(`../assets/img/${item.meta.icon}`)"/>
              <span slot="title">{{item.meta.title}}</span>
            </template>
            <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path">
              <span style="display: inline-block;margin-left: 2vmin;">{{child.meta.title}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </div>
    <el-container class="controlPanel-mainbar">
      <el-header>
        <Navbar></Navbar>
      </el-header>
      <el-main>
        <el-scrollbar style="height:100%">
          <keep-alive>
            <router-view :key="key" v-if="!$route.meta.noCache"></router-view>
          </keep-alive>
          <router-view v-if="$route.meta.noCache"></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import {mapGetters} from 'vuex'
  // import Item from '@/components/layout/Item'
  import Navbar from '@/components/layout/Navbar'

  export default {
    name: 'home',
    components: {
      // Item,
      Navbar
    },
    data() {
      return {
        menuData: []
      };
    },
    computed: {
      ...mapGetters(['sidebar']),
      isCollapse() {
        return !this.sidebar.opened
      },
      key() {
        return this.$route.path;
      }
    },
    mounted() {
      this.initMenu();
    },
    methods: {
      initMenu() {
        for (let i in this.$router.options.routes) {
          let root = this.$router.options.routes[i]
          if (root.hidden)
            continue
          let children = []
          for (let j in root.children) {
            let item = root.children[j]
            if (item.hidden)
              continue
            children.push(item)
          }

          if (children.length < 1)
            continue
          this.menuData.push(root)
          root.children = children
        }
      },
      menuChange(index, indexPath) {
        console.log(index, indexPath)
        this.$router.push({ path: index })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style lang="scss">
  .controlPanel-sidebar {
    height: 100vh;
    background: #0B1433;
    font-family: "Microsoft YaHei";

    .main-title {
      width: 100%;
      height: 8vmin;
      line-height: 8vmin;
      background: #2041B5;

      .title {
        text-align: center;
        font-weight: 300;
        font-size: 20px;
        color: white;
      }
    }

    .title-icon {
      background: #2041B5;
      width: 219px;
      height: 8vmin;
      display: block;
      text-align: center;
      font-size: 44px;
      font-weight: bold;
      color: #43E5FF;
    }

    .el-scrollbar{
      height: calc(100% - 8vmin);

      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }

    .el-menu {
      border-right: none;

      .menu-icon {
        display: inline-block;
        width: 20px;
        height:20px;
        margin-right: 2vmin;
      }
    }

    .el-menu-vertical-demo {
      // width: 205px;
      min-height: 100%;
      height: 100%;

      .barstyle {
        width: 4px;
        background: #409EFF;
        height: 50px;
        float: left;
        margin-left: -40px;
        display: none;
      }

      .el-menu-item:hover {
        background: #202B50 !important;
        color: #fff !important;

        i {
          color: #fff !important;
        }

        .barstyle {
          display: block;
        }
      }

      .el-menu-item.is-active {
        background: #202B50 !important;

        .barstyle {
          display: block;
        }
      }

      .el-submenu i, span {
        color: rgba(255, 255, 255, 0.8) !important;
      }
      .el-menu-item, .el-submenu__title {
        background: #0B1433 !important;
      }
      .el-submenu .el-submenu__title:hover {
        color: #fff;
        background: #202B50 !important;
      }
      .el-submenu .el-submenu__title.is-active {
        background: #202B50;
      }
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 205px;
    }

    .el-menu--collapse {
      width: 60px;
    }
  }

  .el-menu--vertical {
    left: 60px !important;

    .el-menu--popup {
      background: #202B50 !important;
    }
    .el-menu-item:focus, .el-menu-item:hover {
      background: #202B50 !important;
      color: #00B1FF !important;
    }
    .el-menu-item {
      background: #202B50 !important;
    }
    .el-menu--popup {
      padding: 0 !important;
    }
    .el-menu--popup-right-start {
      margin-left: 0 !important;
    }
  }

  .controlPanel-mainbar {
    padding: 0px;
    height: 100vh;

    .el-header {
      background: #17203D;
      height: 8vmin;
      line-height: 8vmin;
    }

    .el-main {
      background: #121B39;
      /*padding: 0;*/

      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
  }
</style>
Ruby.
关注
vue框架开发后台管理系统，菜单设置不缓存，nocache 设置无效
weixin_48596030的博客
02-03 1023
后台管理系统，在用户列表的第2页点某个用户下的详情页时，操作完后点返回，回到的是用户列表的第一页，要实现的是返回原位置
vue高级菜单布局
weixin_65942614的博客
08-11 1640
vue小项目
vue实现菜单切换
weixin_34217773的博客
04-25 4296
vue实现菜单切换，点击菜单导航切换不同的内容以及为当前点击的选项添加样式，或者组件。 method里： css: html代码： <nav> <ul> <li> <a :class="{active : Index == 1}" @click="changeNav(1)">学校新...
Vue 中实现动态右键菜单
最新发布
weixin_71329368的博客
07-05 986
实现一个动态右键菜单。这个菜单能够根据用户的点击位置动态调整其显示位置，确保菜单始终在浏览器窗口的可视区域内。这样的实现可以提升用户体验，使应用更加友好和易用。
Vue 动态菜单+动态路由（基于Element UI）
fzy_1939的博客
07-27 9302
1.路由守卫判定当初次登录时，后端返回路由数据，处理完数据放进vuex存起来。2.（1）菜单组件去获取vuex的路由数据，进行处理形成自己需要的菜单数据并进行渲染。（2）标签页组件去vuex获取Tabs数据，进行渲染。(3)面包屑直接从vuex里获取数据，进行渲染。3.操作（1）当子菜单栏被点击时，在vuex(即store)里面添加Tab数据，同时标签页、面包屑实时渲染。操作（2）当标签页被删除时，在vuex里删除其数据，同时选中上一次点击的子菜单栏和标签页，面包屑也跟着变化。...
vue menu与router的绑定
ken11253的博客
07-30 892
<el-menu router :default-openeds="['1','0']"> <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''"> <template slot="title"><i class="el-icon-sell"></i>{{item.name}}</template> .
vue_ant-design-vue菜单递归
12-28
本项目主要关注的是Ant Design Vue中的菜单（Menu）组件，特别是如何处理后台返回的无限层级菜单数据进行展示。 在实际的Web应用开发中，尤其是那些拥有复杂权限管理和动态路由的系统，后端服务器通常会返回一个...
Vue 菜单栏点击切换单个class(高亮)的方法
10-18
在Vue.js中，实现菜单栏点击切换单个class（高亮）的功能是常见的需求，尤其是在构建具有导航功能的Web应用时。...希望以上内容对你在实际开发中有所帮助，让你能够更好地理解和实现Vue菜单栏的高亮切换功能。
RUOYI VUE 菜单 修改 顶部，支持三级菜单 完整代码修改
03-26
​​RUOYI VUE 菜单 修改 顶部，支持三级菜单 完整代码修改 保留原代码 布局设置，在布局设置中， 开启 TopNav，及开启菜单在顶部，关闭 开启 TopNav，菜单回复左侧。 完整代码见附件，
vue实现菜单切换功能
12-29
vue实现菜单切换，点击菜单导航切换不同的内容以及为当前点击的选项添加样式，或者组件。 method里：  css: html代码： 学校新闻 <div v-if=Index class=line></div> 就业新闻 <div v-if=Index ==...
vue组件与route通信
zhangguowei0916的博客
12-11 353
开发中碰到公共search组件的问题，在与router通信的时候并没有现成的方式方法，因此通过store存值进行实现，逻辑如下 1 首先在store中定义自己的值，只举其中一个例子，其他相关的js自行配置 2  在search组件中点击查询时间的时候需要赋值store中的searchVal 3 在每个router中增加watch监听，在监听中调用自己的方法进行查询
路由noCache失效解决方法.docx
01-07
关于vue-admin-elementui路由noCache失效的解决方法
解决vue admin element noCache设置无效的问题
12-13
1、后台返回的数据 { path: '/fbgq', name: 'fbgq', component: () => import('../views/part/fbgq.vue'), meta: { title: '发布供求', noCache:false } }, 2、对应vue文件fbgq.vue 要在script设置统一的name名称 export default { name:"fbgq", } 以上这篇解决vue admin element noCache设置无效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
VUE的router-link不刷新,路由跳转后缓存还在的终极一步到位的解决方法,也适用与若依框架
张子豪的博客
09-07 4158
如果你用的是若依框架的话,直接打开src/api/router/index.js路由配置项。我是要跳转到/system/sale-saleDetail/index/+ id参数。只要是true就可以每次跳转都刷新缓存了,默认是false.网上找了一大堆,屁用都没有,自己琢磨了一下简单的要死.网上搞得那些方法没一个有用的,浪费时间啊!比如,我的html是这样的。
vue-router路由参数刷新消失的问题解决
书写人生
04-29 2461
1、解决方法一 query 传参你在用 vue-router 跳转的时候可以把参数写进 query 里this.$router.push({name:'articleDetail, query:{articleId: articleId}});这样你的 url 就会像 http://xxx.xxx.xxx/articleDetail?articleId=123，这样无论你怎么刷新 articleI...
vue 强制清除浏览器缓存
weixin_52131798的博客
09-13 5620
（1）最基本的方法就是，在打包的时候给每个打包文件加上hash 值，一般是在文件后面加上时间戳 //在vue.config.js 文件中，找到output： const Timestamp = new Date().getTime() output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`, chunkFilen
vue清理浏览器缓存
weixin_43805387的博客
12-05 5788
在入口文件index.html中，头部添加meta标签 <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-control" content="no-cache"> <me...
Vue-vue-router（二）嵌套路由
refaker的博客
04-07 687
在vue-router（一）中已经提到过，路由匹配的组件将会渲染到<router-view></router-view>中 而在渲染的组件中，同样也可以嵌套路由用来渲染组件。 <div id="app"> <router-view></router-view> </div> const home = { template: '<div>this is home</div>' }; co
electron vue菜单栏
10-19
Electron Vue菜单栏是指在Electron应用中，使用Vue框架自定义菜单栏的功能。通过使用Menu模块，我们可以在应用内自定义菜单，包括菜单项、子菜单、快捷键等。在Electron Vue项目中，我们可以在Vue组件中定义菜单项，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值