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 iframe编程相关代码
Dec 28 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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/06/23 PHP
php获取系统变量方法小结
2015/05/29 PHP
JS解析XML的实现代码
2009/11/12 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
bootstrap table小案例
2016/10/21 Javascript
javascript操作cookie
2017/01/17 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
pycharm 配置远程解释器的方法
2018/10/28 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
Python转换时间的图文方法
2019/07/01 Python
Python 下载及安装详细步骤
2019/11/04 Python
Python函数生成器原理及使用详解
2020/03/12 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
请假条标准格式规范
2014/04/10 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
大雁塔导游词
2015/02/04 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python