vue-cli 添加顶部导航栏及点击导航菜单，左侧菜单栏切换

layout-------------模板包含菜单栏等主要框架
router--------------路由管理,根据路由可生成左侧菜单栏

/** When your routing table is too long, you can split it into small modules**/import Layout from '@/layout'var search = [{path: '/supervise/report',component: Layout,name: 'report',meta: { title: '**', icon: 'component' },children: [{path: 'reportCQL',component: () => import('@/views/supervise/report/reportCQL'),name: 'reportCQL',meta: { title: '**', icon: 'icon' }}------]},{path: '/supervise/search',component: Layout,name: 'search',meta: { title: '**', icon: 'component' },children: [{path: 'forestQuery',component: () => import('@/views/supervise/search/forestQuery'),name: 'forestQuery',meta: { title: '**', icon: 'search' }}]}
]
export default {getMenuMessage:function () {return search;}
}

这是一简单路由，具体见https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html详解
views哈视图s-主要存放.vue也就是具体的页面，多级菜单路由生成

index.vue代码如下

{path: '/nested',component: Layout,redirect: '/nested/menu1',name: 'Nested',meta: {title: '**',icon: 'nested'},children: [{path: 'menu1',component: () => import('@/views/nested/menu1/index'), // Parent router-viewname: 'Menu1',meta: { title: '**' },children: [{path: 'houselist',component: () => import('@/views/house/houselist'),name: 'houselist',meta: { title: '**' },children: [。。。。。此处省略

然后回来看layout文件下
index.vue引入

import { Topbar, Navbar, Sidebar, AppMain } from “./components”;
…
components: {
Topbar,
Navbar,
Sidebar,
AppMain
},
…

export { default as Topbar } from './Topbar'
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'

components下sidebar文件就是左侧菜单了
TopBar是我们的顶部菜单

<template><div><el-menu:default-active="activeIndex"class="topbar-menu"mode="horizontal"@select="handleSelect"background-color="#3a3a3a"text-color="#bfcbd9"active-text-color="#e7ae12"><a href="/"><img :src="logo" class="topbar-logo" :class="aWidth" /></a><div class="title" v-if="sidebar.opened">{{name}}</div><el-menu-item index="0"><a href="/" @click="toggle('0')">首页</a></el-menu-item><el-dropdown class="company-menu"  style="margin-right:20px"  @command="handleCommand"><span class="el-dropdown-link">{{myCompany}}<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="e">企业设置</el-dropdown-item><el-dropdown-item command="e">切换企业</el-dropdown-item><el-dropdown-item command="e" divided> 添加企业成员</el-dropdown-item></el-dropdown-menu></el-dropdown><div class="right-menu"><el-dropdown class="avatar-container" trigger="click"><div class="avatar-wrapper"><img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar" /><i class="el-icon-caret-bottom" /></div><el-dropdown-menu slot="dropdown" class="user-dropdown"><router-link to="/user/userInfo"><el-dropdown-item><a href="/#/user/userInfo">基本信息</a></el-dropdown-item></router-link><router-link to="/user/SafetyManagement"><el-dropdown-item><a href="/#/user/SafetyManagement">安全管理</a></el-dropdown-item></router-link><el-dropdown-item divided><span style="display:block;" @click="logout">退出登录</span></el-dropdown-item></el-dropdown-menu></el-dropdown></div></el-menu></div>
</template>

然后怎么点击顶部菜单左侧菜单也变化-模块
首先要把router路由拆分开
在layout-components-Sidebar文件下index.vue改变菜单参数也就是将router的各个模块分别读取出来

到这里应该了解一下vuex的mapGetters
参考mapGetters
还有$store.dispatch
dispatch

routes(）返回的是菜单的参数，根据不同标识返回不同菜单，当然也可以将菜单存到后台，通过异步请求得到菜单

在顶部菜单Topbar中添加事件

store文件中，我添加到app中

import Cookies from 'js-cookie'
const state = {menuIndex: {opened: Cookies.get('menuIndexStatus') ? Cookies.get('menuIndexStatus') : '0',withoutAnimation: false}
}
const mutations = {TOGGLE_MENU: (state, device) => {console.log(device)state.menuIndex.opened = devicestate.menuIndex.withoutAnimation = falseCookies.set('menuIndexStatus', device)}
}const actions = {toggleMenu({ commit }, device) {commit('TOGGLE_MENU', device)}
}
export default {namespaced: true,state,mutations,actions
}
当点击菜单时会改变menuIndex.opened
左菜单添加
import { mapGetters } from "vuex";
......
computed: {...mapGetters([ 'menuIndex']),
........```有点啰嗦，这里遇到了一个问题，不知道是我这里的问题，还是本身就会出现，当放大缩小浏览器会报
TypeError: Cannot create property 'opened' on string 'desktop'"
没有找到根本原因

vue-cli 添加顶部导航栏及点击导航菜单，左侧菜单栏切换相关推荐

微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
文章目录一.Scaffold 组件二.底部导航栏整体架构三.BottomNavigationBar 底部导航栏四.BottomNavigationBarItem 导航栏条目五.PageVie ...
微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容导航栏样式设置 tabBar导航栏实例一:导航栏样式设置小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
css导航栏_CSS：创建导航栏
css导航栏 Every website needs a navgation bar to help visitors navigate around the website. This is gen ...
css基础 CSS 导航栏、CSS 下拉菜单
阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航栏内联列表项浮动列表项水平导航条实例链接右对齐添加分割 ...
Boostrap_响应式导航栏，点击汉堡按钮遮盖下方元素
Boostrap_响应式导航栏,点击汉堡按钮遮盖下方元素官网那个是直接把其他元素挤到下面了根据这个大哥的源码改了改:https://blog.csdn.net/mazhili1991/articl ...
iOS小技能：自定义导航栏，设置全局导航条外观。（iOS15适配）
文章目录前言 I 自定义导航栏 1.1 自定义导航条 1.2 设置全局导航条按钮主题 1.3 设置导航条渐变颜色 1.4 ` 拦截push` II 相关代码 see also 前言需求:同一个模块 ...
还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下原始导 ...

vue-cli 添加顶部导航栏及点击导航菜单，左侧菜单栏切换

vue-cli 添加顶部导航栏及点击导航菜单，左侧菜单栏切换相关推荐

最新文章

热门文章