vue+elemen ui实现左侧导航栏,右侧内容变化

一、首先编写导航栏组件

我的页面是大项目中的一部分,项目之前已经安装了路由等。

首先在component中添加guide.vue文件。
选择element的一个组件,示例代码如下

<template>
<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :unique-opened="true" :default-active="$route.path"            @select="handleSelect">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>
  
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span>
    </el-header>
    <el-main style="background-color: rgb(238, 241, 246)">           		<router-view></router-view>  
    </el-main>
    
   
  </el-container>
</el-container>

</template>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
    methods:{      
    handleSelect(path){        
    this.$router.push(path)      
    },    
    }
  };
</script>

以上涉及到几个点
1. @select=“handleSelect”,handleSelect的默认参数是el-menu-item标签的index参数,如上面的1-1这些,真正项目中index可以命名为想要跳转页面的组件名,如page1
2. :default-active="$route.path" ,是使用户点击的那个页面展开
3. :unique-opened=“true”,始终只展开一个导航栏
4. 注意到上述代码中

 <el-main style="background-color: rgb(238, 241, 246)">               
 <router-view></router-view>  
 </el-main>

这是路由的出口,保证点击左侧的导航栏右侧显示相关内容。

二、右侧展示的页面示例

我们建立page1.vue,page2.vue(这里是示例,具体项目具体命名),假定把这两个组件也放在component文件夹下。

<template>    
<div class="top">        
<h3>我是page1,我要在右侧展示</h3>    
</div></template><script>  
export default {    
data() {      
return {}      
}    
}
</script>
<style>    
.top{        
text-align:center;    
}
</style>

同理写page2.vue

3.给他们添加路由

找到router目录下的index.js添加上述我们建立的三个页面的路由

import Guide from '@/components/Guide';
import page1 from '@/components/page1.vue';
import page2 from '@/components/page2';
Vue.use(Router);
export const basicRouters=[
{
path:'/Giude',
name:'Guide',
component:Giude,
children:[
{
path:'/page1',
name:'page1',
component:page1
},
{
path:'/page2',
name:'page2',
component:page2
}
]
}
]

可以看到,把想在右边显示的页面路由,放在了children中。这是使Guide成为这两个页面的父组件,这样就能是这两个页面显示左侧的导航栏。

  • 5
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue Element UI 后台管理系统首页模板是一个基于Vue.js和Element UI开发的后台管理系统的首页模板。它提供了丰富的UI组件和功能,帮助开发人员快速搭建和定制自己的后台管理系统。 该模板的特点是简洁、美观、易于使用。它采用响应式设计,可以适应不同尺寸的屏幕,包括电脑、平板和手机。页面布局清晰,组件排列合理,用户可以直观地了解系统的各个功能模块和数据统计信息。 该模板提供了丰富的UI组件,包括按钮、表格、表单、对话框、菜单等。这些组件可以轻松地与后端数据进行绑定,实现数据的展示和交互。同时,该模板还提供了许多常用的功能组件,如权限管理、数据可视化、文件上传等,使得开发人员可以更加方便地实现各种需求。 除了UI组件和功能组件,该模板还提供了一套完整的前端架构和开发规范。开发人员可以基于该模板进行二次开发,添加自己的业务逻辑和样式,以及进行自定义配置。同时,该模板还提供了详细的文档和示例代码,帮助开发人员快速入门和解决问题。 总的来说,Vue Element UI 后台管理系统首页模板是一个功能强大、易于使用、可定制的模板,适用于各种后台管理系统的快速开发。它能够帮助开发人员节省大量的时间和精力,提高开发效率,同时也提供了良好的用户体验和可维护性。 ### 回答2: VueElement UI是一对非常强大的前端开发工具组合,它们能够帮助我们快速构建出漂亮且功能丰富的后台管理系统。而在后台管理系统中,首页模板扮演着非常重要的角色。下面将用300字详细介绍VueElement UI配合的后台管理系统首页模板的特点。 VueElement UI的结合可以带来很多优势。首先,Vue框架本身具有数据驱动和组件化的特点,开发者可以通过创建组件、构建数据模型和实现数据绑定来快速搭建系统页面。而Element UI作为一个基于VueUI框架,提供了丰富的组件库,包含了按钮、卡片、表格、表单等常用组件,能够帮助我们更快速地构建页面。 在后台管理系统中,首页模板需要具备一些常见的功能和布局,以提供给用户友好的操作界面。通过VueElement UI可以轻松实现以下特点。 首先,首页模板需要包含一个侧边栏和顶部导航栏,侧边栏用于展示系统的菜单导航,而顶部导航栏用于显示用户信息和一些通知。VueElement UI提供了多种布局组件,可以快速实现这种侧边栏和导航栏的布局。 其次,首页模板需要展示一些重要的系统指标和数据统计信息,比如会员数量、订单数量、访问量等等。Vue的数据驱动特性可以很方便地将数据绑定到页面上,通过Element UI提供的卡片、图表等组件,可以直观地展示这些数据。 最后,首页模板还需要提供一些快捷入口和功能区块,比如最新订单、推荐产品、系统公告等。通过VueElement UI提供的组件,可以很容易地创建这些功能区块,并且通过路由导航等功能来实现相关的页面跳转和操作。 综上所述,VueElement UI的后台管理系统首页模板具有快速开发、易于扩展和美观实用等特点。通过组件化的开发方式和丰富的UI组件库,可以帮助我们快速构建出功能强大并且美观的后台管理系统。 ### 回答3: Vue Element UI 是一种基于Vue.js框架和Element UI组件库的后台管理系统首页模板。它提供了一套美观、易用、功能丰富的模板,方便开发者快速构建自己的后台管理系统。 Vue Element UI 的后台管理系统首页模板具有以下特点: 1. 响应式设计:该模板可以自动适应不同屏幕大小的设备,包括桌面电脑、平板电脑和手机。无论用户使用何种设备访问后台管理系统,都能得到良好的用户体验。 2. 多样化布局:该模板提供了多种布局方案,包括上下布局、左右布局等,适应不同的需求。用户可以根据自己的喜好和业务场景选择合适的布局。 3. 功能丰富:该模板集成了各种常见的后台管理系统功能模块,包括用户管理、角色权限管理、数据分析等,开发者可以基于这些功能模块快速搭建自己的后台系统。 4. 可定制化:该模板提供了丰富的主题和组件样式配置选项,开发者可以根据自己的需求进行定制。同时,该模板使用了Vue.js的组件化开发方式,方便扩展和组合。 5. 国际化支持:该模板提供了多语言支持,可以方便地将后台管理系统适配成不同语言版本,满足不同用户群体的需求。 总之,Vue Element UI 的后台管理系统首页模板是一种功能强大、易用灵活的模板,可以帮助开发者快速构建响应式、美观的后台管理系统。无论是初学者还是有经验的开发者,都可以轻松上手使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值