在vue-router中配合ElementUI如何实现导航

下面我就为大家分享一篇vue-router配合elementui实现导航的实例,具有很好的参考价值,希望对大家有所帮助。

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

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

default-active="$route.path"

登录后复制

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

:default-active="$route.path"

登录后复制

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

立即学习“前端免费学习笔记(深入)”;

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

 

     图片上传  视频上传  网络请求  其他     

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue.js中详细解读this.$emit的使用方法

在vue.js中详细解读this.$emit的使用方法

在vue.js中详细解读this.$emit的使用方法

以上就是在vue-router中配合ElementUI如何实现导航的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3188498.html

(0)
上一篇 2025年3月31日 23:30:31
下一篇 2025年3月31日 23:30:38

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 使用vue-router如何设置每个页面的title方法

    下面我就为大家分享一篇使用vue-router设置每个页面的title方法,具有很好的参考价值,希望对大家有所帮助。 基本环境配置: webpack + vue2.0 + vue-router +nodeJS 进入 router 文件夹底下…

    编程技术 2025年3月31日
    100
  • 有关vue-router组件存在哪些复用问题?

    本篇文章主要介绍了vue-router 组件复用问题详解,现在分享给大家,也给大家做个参考。 组件系统是Vue的一个重要组成部分,它可以将一个复杂的页面抽象分解成许多小型、独立、可复用的组件,通过组合组件来组成应用程序,结合 vue-rou…

    编程技术 2025年3月31日
    100
  • element-ui功能替换ivew

    这次给大家带来element-ui功能替换ivew,element-ui功能替换ivew的注意事项有哪些,下面就是实战案例,一起来看一下。 实现原理 修改了element-ui源码,把源码里面的tree模块提取出来 然后修改element自…

    2025年3月31日
    100
  • 使用JS如何实现输入搜索功能

    这篇文章主要为大家详细介绍了js实现带导航城市列表以及输入搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了JS实现带导航城市列表以及输入搜索功能展示的具体代码,供大家参考,具体内容如下 实现功能: 1.加载城…

    2025年3月31日
    100
  • 使用jquery如何实现定位式导航

    这篇文章主要介绍了jquery实现企业定位式导航效果 本文实例为大家分享了jquery实现企业定位式导航的具体代码,供大家参考,具体内容如下 完整代码如下: nbsp;html>     *{margin:0;padding:0;} …

    编程技术 2025年3月31日
    100
  • 在vue-router中如何实现路由传参

    这篇文章主要介绍了浅谈vue-router 路由传参的方法,现在分享给大家,也给大家做个参考。 路由传参数。在很多时候我们需要路由上面传递参数,比如新闻列表页,我们需要传递新闻ID,给新闻详细页。 1.新闻列表页模板            …

    编程技术 2025年3月31日
    100
  • 在vue + element-ui中如何实现导入导出

    element-ui是饿了么前端团队推出的一款基于vue.js 2.0 的桌面端ui框架,手机端有对应框架是 mint ui,下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料,需要的朋…

    编程技术 2025年3月31日
    100
  • 如何使用Vue Router实现页面滚动行为控制?

    如何使用vue router实现页面滚动行为控制? 在使用Vue Router进行单页应用开发时,我们经常需要对页面滚动行为进行控制,以实现更顺畅的用户体验。Vue Router提供了一种简单且灵活的方式来实现页面滚动行为的控制。本文将介绍…

    编程技术 2025年3月30日
    100
  • Vue Router中的路由过渡动画是如何实现的?

    vue router中的路由过渡动画是如何实现的? Vue Router是Vue.js官方提供的路由管理插件,它能够方便地组织和管理页面的路径,同时也提供了一些特性来增强用户体验,例如路由过渡动画。通过这些动画效果,可以使页面的切换变得更加…

    编程技术 2025年3月30日
    100
  • Vue中如何使用路由创建动态路由?

    vue中如何使用路由创建动态路由? 动态路由是指通过一定的规则来生成路由,而不是手动一个一个地编写路由规则。在Vue中,我们可以通过Vue Router来实现动态路由。 首先,我们需要在Vue项目中安装Vue Router。可以通过以下命令…

    编程技术 2025年3月30日
    100

发表回复

登录后才能评论