element-ui使用导航栏跳转路由的用法详解


Posted in Javascript onAugust 22, 2018

最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程

element-ui引入vue项目的用法参考element官网

首先复制官网的例子,在这基础上再修改成我们想要的样子。

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
 <el-menu-item index="1">处理中心</el-menu-item>
 <el-submenu index="2">
 <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 index="2-3">选项3</el-menu-item>
 <el-submenu index="2-4">
  <template slot="title">选项4</template>
  <el-menu-item index="2-4-1">选项1</el-menu-item>
  <el-menu-item index="2-4-2">选项2</el-menu-item>
  <el-menu-item index="2-4-3">选项3</el-menu-item>
 </el-submenu>
 </el-submenu>
 <el-menu-item index="3" disabled>消息中心</el-menu-item>
 <el-menu-item index="4"><a href="https://www.ele.me" rel="external nofollow" target="_blank">订单管理</a></el-menu-item>
</el-menu>

<script>
 export default {
 data() {
  return {
  activeIndex: '1'
  };
 },
 methods: {
  handleSelect(key, keyPath) {
  console.log(key, keyPath);
  }
 }
 }
</script>

属性:

* default-active:表示当前active的菜单项的编号
* index:类型为字符串,在每一个el-menu-item组件上都有一个编号,给default-active标记

使用菜单栏进行路由跳转:

<el-menu :default-active="this.$router.path" router mode="horizontal">
 <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
  {{ item.navItem }}
 </el-menu-item>
</el-menu>

数据:

data() {
  return {
  navList:[
   {name:'/findProject',navItem:'发现项目'},
   {name:'/communityActivity',navItem:'社区动态'},
   {name:'/publishProject',navItem:'发布项目'},
   {name:'/personalCenter',navItem:'个人中心'},
   {name:'/manageCenter',navItem:'管理员中心'},
  ]
  }
 }

路由:

export default new Router({
 routes: [{
  path: '*',
  redirect: '/findProject'
 }, {
  path: '/findProject',
  name: 'findProject',
  component: findProject
 }, {
  path: '/communityActivity',
  name: 'communityActivity',
  component: communityActivity
 }, {
  path: '/publishProject',
  name: 'publishProject',
  component: publishProject
 }, {
  path: '/personalCenter',
  name: 'personalCenter',
  component: personalCenter
 }, {
  path: '/manageCenter',
  name: 'manageCenter',
  component: manageCenter
 }]
})

使用菜单栏进行路由跳转有几个注意点:

1. 在el-menu加上router

2. index必须绑定路由的path,参考上面的例子,'/'不能少

3. default-active设为当前路由(this.$router.path),这样在路由变化的时候,对应的menu-item才会高亮。

拓展知识:vue项目中的路由配置方法

公司的项目使用vue脚手架来搭建,是属于后台管理系统。功能页比较多,就使用vue路由来进行跳转;

element-ui使用导航栏跳转路由的用法详解

个人比较习惯上面这种方式放置路由文件,并且使用懒加载的模式来配置,如下:

import Vue from 'vue'
import Router from 'vue-router'
//import Login from '.././views/login.vue'
//import NotFound from '.././views/404.vue'
//import Home from '.././views/index.vue'
Vue.use(Router)

export default new Router({
 mode: 'history',//去掉#号
 routes: [
 {
  path: '/login',
  name: 'Login',
  component: resolve => require(['../views/login.vue'],resolve)
 },
 {
  path: '/404',
  name: 'NotFound',
  component: resolve => require(['../views/404.vue'],resolve)
 },
 {
  path: '/',
  redirect: '/default'
 },
 {
  path: '/',
  name: 'Home',
  component: resolve => require(['../views/index.vue'],resolve),
  meta: {title: '自述文件'},
  children:[
  {
   path: '/default',
   component: resolve => require(['../components/default.vue'],resolve),
   meta: {title: '系统首页'}
  },
  {
   path: '/set',
   component: resolve => require(['../components/set.vue'],resolve),
   meta: {title: '设置'}
  },
  {
   path: '/user',
   component: resolve => require(['../components/user.vue'],resolve),
   meta: {title: '账户管理'}
  },
  {
   path: '/member',
   component: resolve => require(['../components/memberList/memberList.vue'],resolve),
   meta: {title: '会员列表'}
  },
  {
   path: '/baseCharts',
   component: resolve => require(['../components/charts/baseCharts.vue'],resolve),
   meta: {title: '会员分析'}
  }
  ]
 }
 ]
})

在main.js中使用路由进行配置:

element-ui使用导航栏跳转路由的用法详解

这样就可以在需要的地方使用路由了。

以上这篇element-ui使用导航栏跳转路由的用法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
详解vue中移动端自适应方案
May 05 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
JS实现瀑布流效果
Mar 07 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 #Javascript
解决element UI 自定义传参的问题
Aug 22 #Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 #Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 #Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 #Javascript
Vue动态获取width的方法
Aug 22 #Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 #Javascript
You might like
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
什么是python的函数体
2020/06/19 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
护理中职生求职信范文
2014/02/24 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
初中重阳节活动总结
2015/05/05 职场文书
小学生家长意见
2015/06/03 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python