【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. nestjs搭建HTTP与WebSocket服务

    最近在做一款轻量级IM产品,后端技术栈框架使用了nodejs + nestjs作为服务端.同时,还需要满足一个服务同时支持HTTP服务调用以及WebSocket服务调用,此文主要记录本次搭建过程,以及 ...

  2. win7使用onedrive右键托盘图标中文不显示问题

    前言 win7 用的 onedrive不能在微软官网下载,用不了,所以需要下载 win7可以使用的版本. onedrive_for_win7.exe 解决问题 重启电脑解决 其他 我看贴吧说是文本放大 ...

  3. 关于mysql在linux(deb系)遇到的问题及解决方法

    前言 当我在树莓派上安装 mysql 数据库的时候,默认安装的是mariadb 数据库,不过没什么区别(在我看来),然后就是闹心的解决各种问题了 1. mysql 在root用户下无密码登录问题 这个 ...

  4. Java 中你绝对没用过的一个关键字？

    layout: post categories: Java title: Java 中你绝对没用过的一个关键字? tagline: by 子悠 tags: 子悠 前面的文章给大家介绍了如何自定义一个不 ...

  5. JavaScript笔记基础

    JavaScript合集 学完HTML5+CSS3的小伙伴,学习JS时,要多敲多练多想多拓展 刚开始入门JS的时候,我们不需要纠结那么多,有些需要先记住,后面会慢慢明白为什么是这样的 JS基础部分 我 ...

  6. SQL注入绕waf思路总结

    1.关键字大小写混合绕过 关键字大小写混合只针对于小写或大写的关键字匹配技术-正则表达式,如果在匹配时大小写不敏感的话,就无法绕过.这是最简单的一个绕过技术. 例如:将union select混写成U ...

  7. 使用Typora

    Markdown学习 标题:#+空格+名称 二级标题 二级标题:##+空格+名称 三级标题 几级标题以此类推,最多支持到六级标题 字体 Hello,world! 变粗体:一句话的前后加上两个** 变斜 ...

  8. 4.4：Sqoop数据导入实验

    〇.概述 1.拓扑结构 2.目标 使用sqoop工具将数据从mysql数据库导入到HDFS和Hbase 一.配置免密登录hdfs 三.导入到hdfs中 sqoop import --connect j ...

  9. 【SQL进阶】【CASE/IF、COUNT/SUM、多条记录拼接为一个内容】Day03：聚合分组查询

    〇.今日内容概述 一.聚合函数 1.SQL类别高难度试卷得分的截断平均值[去最高最低分求平均] 自己的想法 SELECT tag, difficulty, ROUND((SUM(score)-MIN( ...

  10. python中文词云生成

    一.词云 "词云"就是对网络文本中出现频率较高的"关键词"予以视觉上的突出,形成"关键词云层"或"关键词渲染",从而过滤 ...