【vite】踩坑,首次点击路由跳转页面,发生回退,页面闪回,二次点击才能进入目标页面

最近在做移动端前端项目,使用的vite3+vue3+vant,组件和api挂载,使用的自动导入,unplugin-auto-import/vite和unplugin-vue-components/vite。

在vite.config.ts配置好后,并自动在src生成了components.d.ts与auto-imports.d.ts文件。

后续开发过程中,发现了问题,当每次修改过代码,合并拉取后,首次进入某个页面的路由,点击时,首先会跳转想目标路由,然后发生闪退,回到原页面,二次点击才能跳转过去

查阅了许多资料,一直没找到问题,后续查看日志,vite日志打印了page reload src/components.d.ts的信息,发现页面进行了重载

后面在一篇文章中找到了解决方案

方法一

更改components.d.ts与auto-imports.d.ts生成文件的路径,放置在根目录下,非src

方法二

删除components.d.ts与auto-imports.d.ts这两个文件,vite.config.js配置中,剔除掉dts的配置

参考文献:https://zhuanlan.zhihu.com/p/530626295

【vite】踩坑,首次点击路由跳转页面,发生回退,页面闪回,二次点击才能进入目标页面的更多相关文章

  1. 在做nav-bar部分点击路由跳转相同地址时,控制台报错问题。

    报错信息: Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: &qu ...

  2. mpvue实现微信小程序(欢迎踩坑)

    最近刚使用mpvue完成了微信小程序的开发,写点东西,做个记录. 首先依旧是两个传送门: 微信小程序文档:[https://developers.weixin.qq.com/miniprogram/d ...

  3. 关于elementUi tab组件路由跳转卡死问题

    好久没来了,周五项目终于要上线了(*^▽^*),上线之前测出一个很恶心的bug真真是... 项目:Vue + elementUi   后台管理项目 问题描述:登录后首次通过侧边栏路由跳转到主页面有ta ...

  4. Easyui下的点击回车键跳转到下个控件

    在Easyui框架下,JavaScript 中的 onKeyDown事件居然失效了.所以使用了另外的函数去实现点击回车键跳转到下个控件. /** * 点击回车键跳转到下个控件; * @param ol ...

  5. 【React踩坑记二】react项目实现JS路由跳转

    这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...

  6. vue路由使用踩坑点:当动态路由再使用路由name去匹配跳转时总是跳转到根路由的问题

    闲话少说,直接问题: 之前我的路由时这么写的 { path:'/serverInfo/:id', name:'serverInfo', component:() => import('@/vie ...

  7. WebForm路由踩坑 ajax请求多次

    WebForm路由踩坑 再次接触Asp.Net WebForm已是4年后的今天,源起新入职的公司,一个老的项目. Web接触的少,那就多动手写写. WebForm1.aspx <body> ...

  8. 后端路由项目由 gulp 改为 webpack 的踩坑实录

    前言 公司有个后端路由的项目是用 gulp 作为前端自动化构建工具,最近学习了一下 webpack,深感其强大,一狠心将其改成了 webpack 构建,以下是踩坑实录. gulp 先来说说原来的架构. ...

  9. react-navigation的多次点击重复跳转同一页面、不在堆栈路由页面使用navigation方法的解决思路

    一.react-navigation的初使用 createStackNavigator  ==> createSwitchNavigator  ==>  createAppContaine ...

  10. router路由去掉#!的踩坑记

    项目中在研究去掉router#!的过程中的踩坑过程.

随机推荐

  1. ARMv8之memory model和Observability(四)

    最近在学习整理ARMv8的memory 相关知识,对memory的各种概念搞的头痛,太难读了!!有幸看看窝窝大神整理了部分知识,关键是讲解的地道,透彻.因此在这里学习并转载一下,也希望能够和大家一起探 ...

  2. 为什么Linux需要虚拟内存 [转载好文]

    操作系统中的 CPU 和主内存(Main memory)都是稀缺资源,所有运行在当前操作系统的进程会共享系统中的 CPU 和内存资源,操作系统会使用 CPU 调度器分配 CPU 时间1并引入虚拟内存系 ...

  3. JS逆向实战9——cookies DES加密混淆

    cookie加密 DES 混淆 目标网站:aHR0cHM6Ly90bGNoZW1zaG9wLnlvdXpoaWNhaS5jb20vbWFpbi90ZW5kP05vdGljZUNhdGVJZD0xJk5 ...

  4. 【JVM调优】Day04:总结前三日内容(GC+算法*4+简单回收器*3三色标记,CMS+G1+ZGC,参数个数+OOM+调优参数)

  5. python基础语法&数据类型&运算符

    1.标识符 # -*- coding:utf-8 -*- # @Time :2021/1/16 10:28 # @Author :QAbujiaban # @Email :wbxztoo@163.co ...

  6. ORM执行sql语句 双下划线 外键字段创建 ORM跨表查询

    目录 模型层之ORM执行SQL语句 方式1一 方式二 方式三 神奇的双下划线查询 ORM外键字段的创建 1.创建基础表 2.确定外键关系 3.表的查看 数据的录入 外键字段相关操作 针对一对多 ''' ...

  7. CH392/CH395常见问题解决方法指南

    CH395 问题 1: CH395 初始化失败.解答: 1.首先检查"check_exist"命令,正常情况下 CH395 会将该命令的输入值按位取反后输出,若该命令不正常,则说明 ...

  8. [R语言] R语言PCA分析教程 Principal Component Methods in R

    R语言PCA分析教程 Principal Component Methods in R(代码下载) 主成分分析Principal Component Methods(PCA)允许我们总结和可视化包含由 ...

  9. [编程基础] Python lambda函数总结

    Python lambda函数教程展示了如何在Python中创建匿名函数.Python中的匿名函数是使用lambda关键字创建的. 文章目录 1 介绍 1.1 简单使用 1.2 Python lamb ...

  10. Dubbo架构设计与源码解析(二) 服务注册

    作者:黄金 一.Dubbo简介 Dubbo是一款典型的高扩展.高性能.高可用的RPC微服务框架,用于解决微服务架构下的服务治理与通信问题.其核心模块包含 [RPC通信] 和 [服务治理] ,其中服务治 ...