阅读 62

vue-element-template实战(六)实现顶部一级菜单,左侧二级及二级以下菜单

总思路:

一、在layout里加了一个Topbar组件,地址为:src/layout/components/Topbar.vue

Topbar.vue代码如下:



View Code

二、修改src/layout/index.vue

import { Navbar, Sidebar, AppMain, TagsView ,Topbar } from ‘./components‘
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView,
    Topbar
  },
.app-wrapper {
    @include clearfix;
    position: relative;
    //height: 100%;
    height: $contentHeight;
    width: 100%;
    &.mobile.openSidebar{
      position: fixed;
      top: 0;
    }
  }

三、修改src/styles/variables.scss

$sideBarWidth: 210px;
$topBarHeight: 56px;
$contentHeight: calc(100vh - 56px);

四、新增src/store/modules/permission.js

import { constantRoutes } from ‘@/router‘

const state = {
  routes: [],
  addRoutes: [],
  currentRoutes: {}
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  },
  SET_CURRENT_ROUTES: (state, routes) => {
    state.currentRoutes = routes
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

五、修改src/store/index.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import getters from ‘./getters‘
import app from ‘./modules/app‘
import settings from ‘./modules/settings‘
import user from ‘./modules/user‘
import tagsView from ‘./modules/tagsView‘
import permission from ‘./modules/permission‘  //新增

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    tagsView,
    user,
    permission   //新增
  },
  getters
})

export default store

六、

src/store/modules/permission.js

原文:https://www.cnblogs.com/windok/p/13683187.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐