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的可多选的下拉列表框
Jul 20 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
JS forEach跳出循环2种实现方法
Jun 24 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代码
2008/04/09 PHP
php 无限级缓存的类的扩展
2009/03/16 PHP
php中计算时间差的几种方法
2009/12/31 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
php技巧小结【推荐】
2017/01/19 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
js简单时间比较的方法
2016/08/02 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
详细分析React 表单与事件
2020/07/08 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
python求素数示例分享
2014/02/16 Python
python rsa 加密解密
2017/03/20 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Python 解析简单的XML数据
2020/07/24 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
群众路线剖析材料
2014/02/02 职场文书
社区好人好事材料
2014/12/26 职场文书
优秀教研组申报材料
2014/12/26 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python