vue-router配合ElementUI实现导航的实例
在每个项目中路由是不可或缺的，最近学习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实现导航的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍移动端底部导航固定配合vue-router实现组件切换功能，包括了移动端底部导航固定配合vue-router实现组件切换功能的使用技巧和注意事项，需要的朋友参考一下 在我们平时练习或者实际项目中也好，我们常常遇到这么一个需求：移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。 相信对于很多朋友而言，这是一个很简单的需求，而且市面上
-
本文向大家介绍vue使用ElementUI时导航栏默认展开功能的实现，包括了vue使用ElementUI时导航栏默认展开功能的实现的使用技巧和注意事项，需要的朋友参考一下 本文主要参考： http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现，能够展开的导航栏是不能展开的，效果这里先不演示了。可以在上边的网站上看到。 现在有
-
本文向大家介绍vue-router之实现导航切换过渡动画效果，包括了vue-router之实现导航切换过渡动画效果的使用技巧和注意事项，需要的朋友参考一下 过渡动效 提供了transition的封装组件，添加过渡动画，通过添加或删除css类名来实现。 过渡的css类名： v-enter 进入过渡的开始状态 v-enter-active 进入活动状态 v-enter-to 进入的结束状态 v-
-
7.2 导航实现 本节内容主要介绍导航的完整性实现，旨在掌握机器人导航的基本流程，该章涉及的主要内容如下: SLAM建图(选用较为常见的gmapping) 地图服务(可以保存和重现地图) 机器人定位 路径规划 上述流程介绍完毕，还会对功能进一步集成实现探索式的SLAM建图。 准备工作 请先安装相关的ROS功能包: 安装 gmapping 包(用于构建地图):sudo apt install ros
-
本文向大家介绍vue elementui form表单验证的实现，包括了vue elementui form表单验证的实现的使用技巧和注意事项，需要的朋友参考一下 最近我们公司将前端框架由easyui 改为 vue+elementui 。自学vue两周 就开始了爬坑之路。业余时间给大家分享一下心得，技术新手加上第一次分享(小激动)，有什么不足的地方欢迎大家指正，多多交流才能共同进步！ 1.问题 我
-
本文向大家介绍vue-router有哪几种导航钩子（ 导航守卫 ）？相关面试题，主要包含被问及vue-router有哪几种导航钩子（ 导航守卫 ）？时的应答技巧和注意事项，需要的朋友参考一下 三种导航钩子： 1.全局导航钩子：router.beforeEach(to,from,next) 作用：跳转前进行判断拦截 2.组件内的钩子 3.单独路由独享组件