vue-router配合ElementUI实现导航的实例


Posted in Javascript onFebruary 11, 2018

在每个项目中路由是不可或缺的,最近学习vue-router和ElementUI配合使用实现导航栏,在学习的过程中遇到一个问题:点击浏览器的刷新之后页面停留在原来的位置,但是导航却是默认第一个。

由于接触前端时间不长,对于路由的概念不是特别清楚,按照文档写了之后完全不知道怎么下手了,请教了同事,同事的解决办法是利用vuex管理,但是vuex这块还没有接触过,所以这个问题就一直搁置了,今天周末自己在家学习偶然直到了可以使用$route.path设置默认选中的导航,但是设置之后没有什么效果,刷新时页面依旧停留在原来位置,导航却一个都没有选中,查了半天资料也没有找到答案,后来和网上的一个例子进行对比,发现

default-active="$route.path"

前面还需要添加绑定符号,如下:

:default-active="$route.path"

如此设置之后就可以实现导航和页面同时变化了。

导航的完整代码请看这里:

<template>
 <div id="app">
 <el-col :span="4">
  <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
    theme="dark"
    router>
  <el-menu-item index="/upload_img">图片上传</el-menu-item>
  <el-menu-item index="/upload_video">视频上传</el-menu-item>
  <el-menu-item index="/https">网络请求</el-menu-item>
  <el-menu-item index="/other">其他</el-menu-item>
  </el-menu>
 </el-col>
 <router-view></router-view>
 </div>
</template>

以上这篇vue-router配合ElementUI实现导航的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 #Javascript
使用vue-router设置每个页面的title方法
Feb 11 #Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 #Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 #Javascript
vue.js,ajax渲染页面的实例
Feb 11 #Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 #Javascript
vue中引用阿里字体图标的方法
Feb 10 #Javascript
You might like
PHP调用Webservice实例代码
2011/07/29 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python中Apriori算法实现讲解
2017/12/10 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python设置环境变量的原因和方法
2019/06/24 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
心得体会怎么写
2013/12/30 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
自荐信怎么写
2015/03/04 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
升学宴来宾致辞
2015/07/27 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis