VUE3&VANT3 在route中使用Dialog 出现页面闪烁，地址混乱，弹窗再次打开出现问题

最新推荐文章于 2024-09-10 11:56:39 发布
最新推荐文章于 2024-09-10 11:56:39 发布
阅读量215 收藏
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maneger_user/article/details/140798595
版权

现象：

1. 使用next(false)拒绝跳转后，再次打开弹窗无法关闭，或打开直接地址发生变化

2. 页面在打开弹窗时闪烁一下

3. 路由地址混乱

解决方案

1. (推荐)利用官方属性，文档上有特别提到  closeOnPopstate

设置后解决问题

2. 将代码放到 setTimeout 内调用

同样可以使问题解决

maneger_user
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite4+vue3+vant初始化移动端项目框架
SummerGao
05-31 238
在使用函数组件时，unplugin-vue-components 无法解析自动注册组件，导致 @vant/auto-import-resolver 无法解析样式，因此需要手动引入样式。我们看到以上配置中，自动引入的有vue、vue-route、vue-i18n以及src/auto-imports.d.ts。eslint-plugin-vue：仅支持vue，提供的规则可以支持 .vue\js\jsx\ts\tsx 文件校验。为了方便地进行代码格式修复、报错提醒、规范化，这里继续安装和配置eslint。
Vite创建vue3+ts+pinia+vant项目起步流程
qq_40589140的博客
10-24 2420
本质上他是一个包管理工具，和npm/yarn没有区别，主要优势在于。
Vue3+Vant开发：个人信息管理
程序员老茶的博客
04-18 1377
Vue3+Vant开发：个人信息管理
vue3移动端项目构建，vue3+vant+vite+axios+pinia+sass
局外人LZ的博客
02-27 5275
本文只是大致讲了下vue3移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。
【Vue3/Vant3】 搭建移动应用
qq_63354840的博客
10-27 1713
vue移动框架搭建
vue3 + vant3.x 项目 更新vant typescript---记录总结
weixin_43512977的博客
07-25 4161
vue3 + vant3.x 搭建项目
vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）
weixin_44705979的博客
06-26 895
【代码】vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）
vue3.0 + vant实现下拉刷新上拉加载
chengcheng9876的博客
06-28 1233
vue3.0 + vant实现下拉刷新上拉加载 @load事件不生效，在滚动的过程中，onLoad事件没有任何反应
【vue前端项目实战案例】Vue3仿今日头条App
柯晓楠
07-23 1014
本文将开发一款仿“今日头条”的新闻App。该案例是基于 Vue3.0 + Vue Router + webpack + TypeScript 等技术栈实现的一款新闻资讯类App，适合有一定Vue框架使用经验的开发者进行学习。 项目源码在文章末尾 1 项目概述 该项目是一款“今日头条”的新闻资讯App，主要有以下功能。 新闻分类 首页新闻列表 刷新加载最新新闻 用户私信留言 新闻搜索 查看新闻详情 1.1 开发环境 本项目是基于Vue3框架开发的一款WebApp，使用Vue CLI脚手架工具创建项目。
【Vue知识点- No7.】路由、vant组件库的使用
qq_48687155的博客
07-24 578
1. 能够了解单页面应用概念和优缺点 2. 能够掌握vue-router路由系统使用 3. 能够掌握链接导航和编程式导航用法 4. 能够掌握路由嵌套和路由守卫 5. 能够掌握vant组件库基础使用
移动端项目（vue2+vant组件库）
qq_45585640的博客
06-23 6766
在命令行中输入以下命令创建 Vue 项目： 这里建议两个都选上，更严谨。 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。 安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UynFzUoP-1654274042910)(assets/1582010300149-9932febe-2625-4ee7-986f-9190ab449fec.png)]如
vue + vant 组建loading的使用
qq_45021462的博客
09-29 9215
在代码最后添加loading组建 <template> <div class='detail'> <div class="nav-bar"> <van-nav-bar :border='false'> <template #title> <div class="home-title">标题</div> </template&gt
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践
xxxzzzqqq_的博客
03-15 2205
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
vue3.5新增特性
yunbabac的博客
09-05 462
vue3.5
vue使用自定义指令实现一键复制
Zing_ing的博客
09-09 533
/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 610
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
SprinBoot+Vue远程教育网站的设计与实现
最新发布
赵广陆
09-10 1144
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值