vue+ElementUI实现左边导航栏点击右边内容变化（亲测有效）

elementUI官网

一个导航栏组件，若干个它的子组件，也就是右边的内容组件

我这里准备了五个子组件

1、首先看home.vue组件（导航栏组件）

<template><el-container><el-aside width="15%"><div class="menu"><el-menudefault-active="2"class="el-menu-vertical-demo"background-color="#afc5e2"text-color="#fff"@select="changeSidebar"active-text-color="#ffd04b"><el-menu-item index="MyMessage"><i class="el-icon-s-custom"></i><span slot="title">个人中心</span></el-menu-item><el-menu-item index="Order"><i class="el-icon-s-claim"></i><span slot="title">我的订单</span></el-menu-item><el-menu-item index="Preferred"><i class="el-icon-s-shop"></i><span slot="title">今日优选</span></el-menu-item><el-menu-item index="SecKill"><i class="el-icon-chat-dot-square"></i><span slot="title">秒杀活动</span></el-menu-item><el-menu-item index="Inform"><i class="el-icon-message-solid" ></i><span slot="title">店铺消息</span></el-menu-item></el-menu></div></el-aside><el-container><el-header>欢 迎 使 用 电 商 系 统</el-header><el-main><!-- 仔细看，核心在这，这里是路由的出口--><router-view></router-view></el-main></el-container>
</el-container>
</template><script>export default {data() {return {}},mounted() {this.sidebarItem = this.$route.name;},methods: {changeSidebar(path) {this.$router.push(path);},}}
</script><style scoped>.menu{height: 730px;background-color:  #afc5e2;}.el-header {background-color: #afc5e2;color: #333;font-size:30px;text-align: center;line-height: 60px;}.el-aside {color: #333;text-align: center;line-height: 900px;}.el-main {background-color: #cfebe43f;color: #333;/* text-align: center; */line-height: 160px;padding: 0px ! important;}</style>

仔细看上边的导航栏，都有一个index属性（原本是数值，我自己改了）

<el-menu-item index="MyMessage">
<i class="el-icon-s-custom"></i>
<span slot="title">个人中心</span>
</el-menu-item>

给导航栏绑定一个@select

上面的方法是用来实现页面路由的跳转

好了，home部分就配置结束了

路由配置

找到router下的index.js文件，按照下面配置

1、导入组件

2、注册组件路径

3、在home下面配置子组件

import Vue from 'vue'
import Router from 'vue-router'import Index from '@/Login/Index'
import home from '@/pages/home'
import Preferred from '@/pages/Preferred'
import Order from '@/pages/Order'
import SecKill from '@/pages/SecKill'
import Inform from '@/pages/Inform'
import MyMessage from '@/pages/MyMessage'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'index',component: Index},{path:'/home',name:'home',component:home,redirect: {name: "Preferred"},   //输入路由home会重定向到Preferred页面(一进来显示的页面)children:[{path: "/Preferred",name: "Preferred",component: Preferred,meta: {title: "优选"}},{path: "/Order",name: "Order",component: Order,meta: {title: "订单"}},{path: "/SecKill",name: "SecKill",component: SecKill,meta: {title: "秒杀"},},{path: "/Inform",name: "Inform",component: Inform,meta: {title: "店铺信息"}},{path: "/MyMessage",name: "MyMessage",component: MyMessage,meta: {title: "我的信息"}}]},]
})

此处的nane就是在home中菜单的index属性，需要一一对应

好了，配置就结束了

各位给个赞咯

vue+ElementUI实现左边导航栏点击右边内容变化（亲测有效）相关推荐

vue实现tabs侧边导航栏点击内容跳转到对应位置，且内容滚动导航栏切换，封装直接用
<template><div><el-dialogsize="big"title="名字":vi ...
vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store 定义logout方法引入顶部导航栏创建client/s ...
微信小程序顶部导航栏点击选项产生颜色变化和底部下划线显示
在很多程序中都有一个功能,就是顶部导航栏点击的时候能自动切换页面,并且选中的模块会变换颜色并且底部出现一条横线. 首先思考这个功能的实现原理--通过"点击"这个动作,我们能知道点击 ...
html 导航栏选中状态,jQuery“导航栏点击选中效果“代码
现在的网站菜单导航栏几乎都有点击选中效果,正好今天我在开发项目中也需要用上这样的效果,下面就给大家分享一下,亲测有效,大家放心使用. 1.引入jQuery核心文件 2.加入"jQuery导航 ...
layui隐藏侧边栏_layui禁用侧边导航栏点击事件的处理方法
layui是一款优秀的前端模块化css框架.我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然,她最大的优点我觉得还是她的模块化方式,相 ...
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
Vue 实现左边导航栏且右边显示具体内容（element-ui）
最终效果图: 现在开始进入正题: 1.安装element-ui npm i element-ui -S CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引 ...
html5导航栏点击之后变色,vue实现导航栏点击当前标题变色
1.效果 2.步骤首先在vue实例中生命一个数组,里面放置导航栏的内容,并声明两个变量,一个控制下方文字的变动,一个控制颜色的变动然后再创建一个列表,通过v-for遍历数组,将这个数组显示到页面中 ...
使用vue2开发的移动端项目头部点击按钮显示出来的盒子，盒子里面有element-ui里面的导航栏菜单，点击里面某一个导航栏菜单实现跳转之后显示出来的盒子隐藏
1 . 在头部点击按钮时,通过一个变量控制盒子的显示和隐藏.可以使用v-if或者v-show指令来实现,例如: <template><div><div @click ...

vue+ElementUI实现左边导航栏点击右边内容变化（亲测有效）

路由配置

vue+ElementUI实现左边导航栏点击右边内容变化（亲测有效）相关推荐

最新文章

热门文章