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 相关文章推荐
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
JavaScript中的几种继承方法示例
Dec 06 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递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
用python制作游戏外挂
2018/01/04 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
python 如何引入协程和原理分析
2020/11/30 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
小学数学教学反思
2014/02/02 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
Fluentd搭建日志收集服务
2022/09/23 Servers