Bug：Vue路由不跳转而是刷新页面

最新推荐文章于 2023-05-09 17:03:22 发布

彭世瑜

最新推荐文章于 2023-05-09 17:03:22 发布

阅读量3.4k

点赞数 2

分类专栏： Vue

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/99824642

版权

Vue 专栏收录该内容

67 篇文章 3 订阅

订阅专栏

问题

Vue路由不跳转而是刷新页面

解决

经过同事的仔细观察，发现点击跳转时，路由中多了一个【问号】并刷新页面没有发生跳转，再次点击才生效

方式一

使用了click.prevent阻止form表单的默认提交事件

<button @click.prevent="onSubmit" >登录</button>

方式二

button默认是submit类型，改成type=“button”

<button type="button"></button>

方式三

把 el-form 组件去掉。因为也没什么必要，加了form 无非就是在两个input 中按回车能自动提交

<el-row>
	<el-input v-model.trim="keywords" @keyup.enter.native="search()">
		<el-button  icon="el-icon-search" @click="search()">搜索</el-button>
	</el-input>
</el-row>

最后用方式3解决了问题

参考
Vue点击登录的时候自动加了问号?

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

彭世瑜

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3电影中后台开发纪实（九）：项目简历与面试

欧阳桫的技术博客

12-17

1736

刀锋电影管理端是刀锋电影App与刀锋电影小程序的中后台管理端程序；包含用户管理、数据看板、在映影片管理、预告管理、城市管理、影院管理、订单管理、运营管理、售后客服等模块；运营人员通过该系统可以创建与维护系统用户、管理用户权限、发布影片与影院信息、创建运营活动、跟踪用户订单、提供售后服务等；

Vue保姆级项目教程：十万字零基础开发信贷管理系统！

最新发布

weixin_55355282的博客

03-09

932

本文档概述了信贷管理系统的开发过程和关键需求，包括用户管理、信贷申请、贷款审批、数据分析、安全性、兼容性、扩展性和用户界面。目的是提高信贷业务的效率和准确性，满足机构对信贷业务管理的需求。

参与评论您还未登录，请先登录后发表或查看评论

vue路由无法跳转，只刷新页面的问题

一如年少丶的博客

04-27

1439

问题在我输入正确的信息登陆之后，Vue路由不跳转到首页解决后来发现是form表单的默认提交事件导致的，我们来使用click.prevent阻止form表单的默认提交事件 <div class="form-group"> <button @click.prevent="submitForm('loginform')" class="btn btn-default">L...

Vue路由跳转不是跳转而是刷新页面，并在#前出现？的问题解决

m0_62470710的博客

03-12

313

</button>在大佬帮助下找到原因，大概是表单的默认提交动作的锅(好像算是个bug？)，阻止默认动作即可。原来：<button @click="toUrl()">

vue 登陆成功后卡死，不跳转首页，提示 You may have an infinite update loop in a component render function

lmy_loveF的博客

08-19

816

错误消息：解决方法： // Show parent if there are no child router to display if (showingChildren.length === 0) { //加入判断，避免在这个地方死循环 if (this.tempChild != parent) { this.onlyOneChild = { ...parent, path: ''

vue鼠标不点击停留一段时间就跳转到登录页

qq_43358160的博客

02-03

727

1、在utils新建一个astrict.js // 引入路由和storage工具函数 import router from "../router" var lastTime = new Date().getTime() //点击的最后一次时间 var currentTime = new Date().getTime() //现在时间 var timeOut = 60 * 60 * 1000 //设置超时时间: 60分钟 window.document.onclick = function() { //

vue-router 问题：解决路由无限跳转问题

weixin_42385932的博客

02-23

922

问题：输入路由没有的路径时发生无限跳转解决：按vue-template后台的方案，通过重定向进行跳转 { path: ‘/404’, name: ‘404’, component: (resolve) => require([’@/views/error-page/404’], resolve) }, { path: ‘*’, redirect: ‘/404’, hidden: true }，但依然没有解决问题。在排查的过程中，发现控制台有报黄色警告： [vue-router] Dupl

记一次前端bug：前端vue列表查询出现重复数据的情况

SHUKAI618的博客

06-07

3412

最近开发遇到一个奇怪的问题：页面列表分页查询时出现很多条完全相同的数据，打完断点，发现接口查询出来的数据时没问题的，没有重复的，但是页面显示的时候就出问题，数据重复：在前端页面的请求结果中发现：Network中Response里得到的数据时正常的，但是Preview里面的数据就出现了重复的情况正常数据： Preview里面分页的10条数据出现多条重复数据经过梳理： NetWork中的 preview 是错误的，而response 的值却是正确的。使用Postman来进行请求，

vue在微信里面的兼容问题_Vue单页面应用+微信网页开发·填坑小记

weixin_39693662的博客

12-22

630

上两个星期做了一个公司用于推广的小活动，选择了Vue的单页面应用。【Vue单页面应用+微信网页开发】套餐赠送了超值大坑，在这里给大家分享一下我的辛酸，啊不，填坑记录。主要是前端填坑的实现，后台方面没有太多涉猎，小白所记，不正确、不准确的还请多多指教。坑的方位：1、微信网页授权登录(前后端分离导致的跨域问题)2、接入JS-SDK实现分享等功能(history模式副带的页面刷新问题和iOS、Andro...

vue 使用问题汇总

JiangLittleBai的博客

06-23

996

1、怎么理解样式文件里的/deep/ /deep/ 深度选择器：经常在开发中使用到组件库element-ui/ant-design等等，，若是想要对某个组件的样式进行调整但又不影响全局，，/deep/是个很好的选择，可以穿透scoped实现组件样式的修改，一般是在less、sass中使用 >>>一般则在css中使用，因为有些像 Sass 之类的预处理器无法正确解析 >>>，它是/deep/的别名 /deep/.ant-upload-list-item-uplo

vue 刷新之后嵌套路由不变重新渲染页面的方法

01-19

解决嵌套路由刷新时，路由没有变化，正常情况下页面是不会重新渲染的 1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来 2、写写一个reload方法，在页面刷新只有，点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false 在修改数据之后使用 $nextTick，条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数，可以用编程试导航，query来传参，但是这种方式可能刷新之后会有问题。我的解决方法是在刷新之后点击页面中的某个条件的时候，将参数存在localstorage里面，这个时候执行reload方法来重新

Vue 路由跳转的时候没有反应

handsome_sai的博客

05-21

1896

Vue路由跳转的时候没有反应引入路由是否正确引入的组件是否正确是否使用路由的… … 详细看下图 import Vue from 'vue' import Router from 'vue-router' import Main from '../components/Main' import Login from '../components/Login' Vue.use(Router) export default new Router({ routes: [ {

解决：VUE同一路由强制刷新页面

热门推荐

scoful的专栏

04-18

7万+

解决：VUE同一路由强制刷新页面

点击按钮无法实现页面跳转

二楼后座的专栏

05-10

6316

今天，在button按钮的click事件中，使用window.location.href实现页面的跳转，结果，在点击按钮时，页面没有变化（其实已经不是原来的页面），无法实现跳转。错误原因：在进行表单提交时，提交事件会先于window.location.href="jsp/Mainview.jsp"执行，所以，在点击完button按钮之后，虽然看似并未发生页面跳转，其实（本质上），页面已经发生了变化...

解决vue <router-link>在IE与火狐上点击失效（路由不跳转）问题

weixin_30284355的博客

10-24

1037

<router-link to="/GoAbroad"> </router-link> vue中的<router-link>这种声明式的路由方式在IE与火狐中有时会出现失效问题（目前我还不知道是什么原因导致的），但是我把这种声明式的方式换成编程式的方式就没有问题里，也就是下面这种： <button class="btn-card" @cl...

解决路由重复跳转bug

u013729608的专栏

05-09

1556

经过思考，项目其他地方应该是调用路由跳转的方法，例如。

路由跳转自动刷新一次页面（避免循环刷新）

m0_70977931的博客

01-10

2286

路由跳转自动刷新一次页面（避免循环刷新）

vue通过router地址传参跳转同一路由页面，页面不刷新的解决办法

qq_33235680的博客

03-09

5095

vue通过router地址传参跳转同一路由页面，页面不刷新的解决办法

Vue3入门笔记----实现页面路由功能

panzhixiang

11-11

1533

Vue3路由实现，vue-router

vue子路由跳回父路由页面不刷新

10-10

在Vue中，当子路由跳转回父路由页面时，默认情况下是不会刷新父路由页面的。这是因为Vue使用了路由的懒加载机制，只有在首次加载路由时才会渲染对应的组件，之后的跳转只是切换组件的显示与隐藏，并不重新加载。如果你希望在子路由跳转回父路由页面时进行刷新，可以采用以下方法： 1. 使用`watch`监听$route对象的变化，然后在变化时执行相应的刷新操作。具体代码如下： ```javascript watch: { $route(to, from) { // 判断当前路由是否是父路由 if (to.path === '/' && from.path.startsWith('/parent')) { // 执行刷新操作，例如重新获取数据等 this.reload(); } } }, methods: { reload() { // 执行刷新操作 } } ``` 2. 在父组件中使用`<router-view :key="$route.fullPath" />`，通过给`router-view`组件设置唯一的`key`属性，可以强制刷新父路由组件。具体代码如下： ```vue <template> <div> <router-view :key="$route.fullPath" /> </div> </template> ``` 以上两种方法都可以实现在子路由跳转回父路由页面时进行刷新。请根据你的需求选择适合的方法。