element-ui使用导航栏跳转路由用法
element-ui使用导航栏跳转路由用法
最近初学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" 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.$route.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.$route.path),这样在路由变化的时候,对应的menu-item才会高亮。
转载于:https://www.cnblogs.com/mmzuo-798/p/9267421.html
element-ui使用导航栏跳转路由用法相关推荐
- element ui路由配置文件_element-ui使用导航栏跳转路由的用法详解
最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项目的用法参考 首先复制官网的例子,在这基础上 ...
- vue导航栏跳转路由
Element UI手册:cloud.tencent.com/developer/d- 中文文档:element-cn.eleme.io/#/zh-CN github地址:github.com/Ele ...
- html5底部导航图标制作,如何做好UI底部导航栏图标设计
原标题:如何做好UI底部导航栏图标设计 如何做好UI底部导航栏图标设计?图标在产品中的应用非常重要,不同位置的图标有不同的设计思路.本文将从产品和设计两个角度对底部导航栏的图标进行分析.UI设计创新技 ...
- 修改element ui的导航菜单样式,包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
- html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.getElemen ...
- js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.get ...
- Android CoordinatorLayout 实现浮动导航栏效果、常规用法
CoordinatorLayout Android CoordinatorLayout+RecyclerView Demo Android CoordinatorLayout+AppBarLayout ...
- vue element menu侧边导航栏 数据渲染
<template><!--el-menu里的颜色是通过element定义的属性来设置的,css样式中没有相关样式--><!--unique-opened 只摊开一个el ...
- vue element menu侧边导航栏
<template><!--el-menu里的颜色是通过element定义的属性来设置的,css样式中没有相关样式--><!--unique-opened 只摊开一个el ...
最新文章
- 自定义IP原来如此简单
- 【solr5.5环境搭建】在tomcat8里面部署solr5.5
- Capturing 'self' strongly in this block is likely to lead to a retain cycle
- iOS - 打电话, 发短信
- 9月份计算机应用基础统考,2018年9月计算机应用基础统考题库-网考计算机应用基础真题1...
- Python面试题总结(6)--数据类型(综合)
- 数字签名开源_开源如何推动数字艺术时代
- linux 查看磁盘管理,linux下的磁盘管理
- 直接用Jdbc就能操作数据库了,为什么还要用spring框架
- html jquery图片轮播代码,jQuery实现图片轮播效果代码,jquery实现代码
- 苹果Objective-C源代码
- PhpStorm10最新版破解注册激活码(图文版)
- 论文写作中插入公式间距变大怎么办?
- Php中什么时候用单引号,PHP中单引号和双引号的用法举例
- Floorplan的SSN(Simultaneous Switching Noise)问题
- golang it营_深入理解Go-垃圾回收机制
- 华为领衔,“5G+摄像头”拿下双影帝,多家国产手机凭借拍照入围MWC最佳演员...
- C#、winfrom设置金额数字大小写转换
- react实现九宫格抽奖 - h5
- 筹码底部共振(同花顺指标 副图 源码 测试图)
热门文章
- thymeleaf报错:Could not load content for xxx /css/bootstrap.min.css.map:HTTP error: status
- Django 3.2.5博客开发教程:实现模板之前的分析与准备
- DEEPIN 20安装镜像进入LIVE模式
- 复制Hadoop目录至其他节点时的注意点
- 【收藏】win10将wsl升级到wsl2
- linux userdel删除用户命令
- Linux chown命令:给资源绑定用户权限
- 请说明一下web.xml文件中可以配置哪些内容?
- Centos7入侵分析:分析SSH登录日志
- java内部类的作用