vue+vue-router+Element ui 怎么点击导航不跳转页面但是可以弹出弹框

最新推荐文章于 2023-12-04 21:48:59 发布
最新推荐文章于 2023-12-04 21:48:59 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue javascript 网页设计 vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Missxu1895/article/details/108620553
版权

怎么利用vue-router+Element ui点击导航不跳转页面但是可以弹出弹框

我们每次在点击导航的时候总是会跳转组件，现在的功能需要就是不跳转页面但是点击某一个导航按钮可以弹出弹框，这就要在写路由的时候动一下手脚，也就是在写路由的时候我们需要的就是把path设为空，而且不需要写component，即
这是router中的路由参数
写完以后，导航是遍历出来的，然后在利用的时候就是分两种，一种就是除了弹框页面点击跳组件的，一种就是点击弹出弹框的，即在遍历的时候需要分开写
这是遍历导航的时候需要进行区分
在遍历导航的时候，在==‘YAML创建的时候’，也就是会弹出弹框的导航出发了一个事件就是toCreate()，然后就可以写一个单独的页面用这个事件去触发弹框了

是小许同学吖
关注
专栏目录
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip
10-30
它提供了一系列美观、实用的组件，如按钮、表格、下拉菜单、导航栏等，大大简化了前端开发过程，使得我们可以快速搭建出符合现代设计标准的界面。 axios是一个基于Promise的HTTP库，可以在浏览器和node.js中使用。...
vue跳转方式及传参 (包括打开新窗口)
rail1988的博客
11-20 921
本文实例讲述了vue跳转方式（打开新页面）及传参操作。分享给大家供大家参考，具体如下： 1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="spanfour" >link跳转</span> </router-link> // 添加参数 <router-link :to="{path:'/detail/two', query:{id:1，name:'vue'
vue2路由跳转，页面不跳的问题
Daisy_ls的博客
07-16 2444
解决方案添加路由出口（这个页面是tiao转到新页面，所以把写在App里更适合，同时在App里写一个生命周期钩子，表示页面刚加载完就展示home页面，同时在点击时会跳转到这个出口页面，展示注册页面）由于学的不扎实，这里我遇到的问题可能用路由守卫就能解决，但是我不会，只会简单的入门级解决方案。main.js里也有变动，补充完整（不补也没问题）...
vue点击菜单不跳转页面只是切换主体部分内容即切换组件
qq_41588568的博客
05-23 9511
<template> <div> <div class="nav"> <el-row :gutter="20"> <el-col :span="3" @click.native="menuChange('Home')" ><div class="grid-content bg-purpl...
Vue点击按钮弹出独立页面(弹出窗口)
weixin_46221897的博客
02-24 9987
话不多说上代码 Html <template> <div style="padding:10px 20px 0 20px;"> <el-button class="wp-but" @click="Popup">catia</el-button> </div> </template> Js <script> export default { data() {
vue2项目+elementui+axios+vueRouter+vuex+less初始化项目
05-23
VueRouter通过设置路由规则，实现了组件化的页面跳转，使得单页应用(SPA)能够更好地管理页面状态和导航。 Vuex是Vue生态中的状态管理库，它集中管理应用的状态，提供了统一的存储空间和操作状态的方法。Vuex遵循 ...
usmall_admin：vue + axios + vuex + vue-router + element-ui实现的商城后台管理系统
02-11
【标题】中的“usmall_admin”是一个基于Vue.js框架构建的商城后台管理系统，它整合了axios用于处理HTTP请求，vuex进行状态管理，vue-router进行页面路由导航，以及element-ui作为UI组件库。这个系统旨在提供高效、...
vue+element导航+标签导航+路由跳转+路由转换.zip
05-21
vue+element导航+标签导航+路由跳转+路由转换，有需要可以取，博客有详尽说明，https://blog.csdn.net/Hei_lovely_cat/article/details/104692047
如何利用vue+vue-router+elementUI实现简易通讯录
10-17
在这个例子中，它可能包含一个侧边栏菜单，通过`v-for`指令遍历数据来生成菜单项，这些菜单项与Vue Router的路由配置对应，点击时会跳转到相应的通讯录页面。 通讯录功能的具体实现，可以通过创建多个Vue组件来完成...
vue路由打开新窗口
考拉很OK
07-05 1208
有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是 $router.push 和 $router.go ,但是vue2.0以后，这种方式就不支持新窗口打开的属性了。这两种平常用的都比较多，这里就不再赘述。注：只有tag="a"模式下 target="_blank" 属性才会生效。
vue路由拦截，点击浏览器返回按钮弹出广告，不跳转页面
徐同保的专栏
03-14 884
vue路由拦截，点击浏览器返回按钮弹出广告，不跳转页面
当前页面dialog弹窗路由跳转到另一个页面时候打开另一个弹窗，关闭页面弹窗后返回跳转前页面，发现弹窗还存在，遮罩层消失了
最新发布
weixin_59703592的博客
12-04 1353
通过弹窗里面路由跳转到其它页面再返回的时候，效果是正常的，弹窗和遮罩层都在！如果跳转到其它页面再打开一个弹窗后，再关闭当前弹窗，返回之前弹窗，会发现弹窗还在，遮罩层却消失了！
element-plus导航不跳转的解决办法
walkertc的博客
03-19 1259
之后发现点击并没有什么变化，这是因为没有将属性。即可实现跳转（当然你得先配置好路由）
vue-antd-admin实现点击菜单栏不跳转页面变为弹窗形式
weixin_52369659的博客
11-26 2069
因为需要要实现以下效果 1.找到menu.js文件 2.找到renderMenuItem方法，将config重新声明，为config赋值写上判断条件，判断条件为你不想跳转的路由路径，(如果有多个，可直接写上父路由路) 3.在AdminLayout.vue文件中加入弹出框，并在SideMenu.vue文件的onSelect方法中通过vuex控制弹出框的显示隐藏 4.最终效果 ...
vue+element动态路由配置踩过的坑
weixin_43743148的博客
01-29 1413
vue+element动态路由配置踩过的坑，动态路由菜单跳转不成功，刷新一直是404页面，菜单不高亮...
vue中push路由跳转只跳转路径，不跳转页面
茂茂的博客
08-10 9684
vue中push路由跳转只跳转路径，不跳转页面 最近我在做毕设时，遇见了一种情况，就是我们从一个页面跳转到另外一个页面时，一般会在方法中去this.$router.push(’/xxx’)。这样就会跳转到我们在路由模块中所配置的页面及其对应的组件。 比如说这里 我们需要从当前的login页面跳转到home页面，下面是路由模块的配置 首先是要引入我们所写的home模块，然后对路由进行配置 这里配置好了我们直接进行跳转，但是却发生了只跳转路径，不跳转页面的情况发生 这里的页面不为所动，我在网上查找了一
Vue学习-组件之间跳转，右侧页面刷新，但左侧菜单栏选中状态未刷新
Java_Scholar0的博客
03-19 2756
解决前图片: 解决方法: 在嵌入菜单的组件中添加路由监听 select(m){ this.menuList.forEach(element => { if(element.children.length > 0){ element.children.forEach(child =>{ if(child.path == m){ this.selectMenu = child; ret
前端vue毕设项目【易购商城】vue + vuex + vue-router + element ui + axios + vu
08-25
易购商城是一个基于Vue框架开发的前端毕设项目。在该项目中，我使用了Vue、Vuex、Vue Router、Element UI、Axios等技术和库来实现各种功能。 首先，Vue是一种流行的前端框架，它具有响应式的数据绑定和组件化的特性，使得开发者可以轻松构建交互性强、高效的单页面应用。 其次，我使用了Vuex来管理应用的状态。Vuex提供了一种集中式的状态管理方案，帮助我管理和共享全局的数据，使得不同组件之间的通信更加便捷。 Vue Router是Vue官方提供的路由管理库，用于实现页面之间的导航和路由跳转。我使用它来定义和管理不同页面之间的跳转逻辑，使得用户可以通过URL来访问和导航各个页面。 Element UI是一套基于Vue的桌面端组件库，它提供了丰富的UI组件和样式，使得我可以快速构建出美观和功能完善的界面。 为了与后端进行数据交互，我使用了Axios库。Axios是一个基于Promise的HTTP客户端，可以在前端与后端进行异步数据交互，使得用户可以实现登录、注册、添加购物车、结算等功能。 最后，我还使用了Vue插件vue-echarts和vue-awesome-swiper来实现商品数据的可视化展示和轮播图功能。这些插件都提供了强大且易用的功能，使得易购商城的用户界面更加丰富和吸引人。 总体来说，通过使用Vue、Vuex、Vue Router、Element UI、Axios等技术和库，我成功地实现了易购商城的前端开发工作，提供了丰富的功能和良好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是小许同学吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值