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

最新推荐文章于 2024-01-22 11:43:47 发布
最新推荐文章于 2024-01-22 11:43:47 发布
阅读量1.4k 收藏 1
点赞数 2
分类专栏： # 【Vue踩坑之路】 文章标签： vue js 路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanzudada/article/details/105788336
版权

问题


在我输入正确的信息登陆之后，Vue路由不跳转到首页

解决


后来发现是form表单的默认提交事件导致的，我们来使用click.prevent阻止form表单的默认提交事件 

<div class="form-group">
	<button @click.prevent="submitForm('loginform')" class="btn btn-default">Login</button>
</div>

验证


我们来验证一下

在这里插入图片描述
在这里插入图片描述
现在已经可以正常跳转到首页了，注意：这是一个大坑，如果你的from表单和button按钮用的不是elementUI这种契合Vue规范的，一定要阻止form表单的默认提交事件，这会导致路由无法跳转

一如年少丶
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
刷新当前页面不跳路由
weixin_45168482的博客
12-17 427
利用 provide 和 inject 实现页面刷新 首先在 App.vue 的 添加 v-if 属性 <router-view v-if="isRouterAlive" ></router-view> 其次在 data 里面添加 isRouetrAlive，这个属性名可以自定义，默认设置为 true，如果为 false 整个页面就不会显示了 然后在 methods 里面添加一个刷新方法 最后需要把这个函数 provide 出去 export default { name
解决vue 路由变化页面数据不刷新的问题
08-27
本篇文章将深入探讨如何解决Vue路由变化时页面数据不刷新的问题。 首先，我们需要理解Vue Router的工作原理。Vue Router采用的是单页面应用程序（SPA）模式，当路由改变时，视图（View）通常应该根据新的路由参数...
Vue路由跳转了但是页面不跳转[解决办法]
热门推荐
weixin_45912825的博客
06-06 1万+
Vue路由跳转了但是页面不跳转[解决办法]为什么会出现这种情况解决办法 为什么会出现这种情况 最近开始学习Vue的组件化开发，想要进行页面跳转就设置了路由： const routes=[ { path:'/', component:home }, { path: '/login', component:login } ] 但是无论路由怎么跳转页面都只在home组件上. 这是因为路由页面需要显示在router-
解决vue项目中路由跳转不生效
最新发布
jinkunqingning的博客
01-22 1582
初学vue，自己新建了一个项目，但是很奇怪的是，配置明明都是正确的，但是点击按钮跳转不生效。然后就是查看你的首页是不是直接写到app.vue里面了，如果是的话，那就寄了。首先是确保跳转的地址和路径是完全正确的。
Bug：Vue路由不跳转而是刷新页面
彭世瑜的博客
08-20 3429
问题 Vue路由不跳转而是刷新页面 解决 经过同事的仔细观察，发现点击跳转时，路由中多了一个【问号】并刷新页面没有发生跳转，再次点击才生效 方式一 使用了click.prevent阻止form表单的默认提交事件 <button @click.prevent="onSubmit" >登录</button> 方式二 button默认是submit类型，改成type=“butt...
vue中 vue-router不跳转
TO_Web的博客
12-10 2610
router-view 点击不跳转 路由配置 { path: '/', name: 'Navcation', component: () => import(/* webpackChunkName: "Navcation" */ '../components/Navcation') }, { path: '/survey', name: 'survey', component: () => import(/* webpackChunkNa
【Vue】Router路由无法跳转问题整理
Sheldon74的博客
09-08 1万+
Vue Router路由无效或异常等问题整理
vue配置路由，路由不跳转，页面不显示
qq_41988113的博客
04-26 1万+
问题1：路由不跳转 遇到这个问题第一时间去检查自己的代码 （1）在router index.js中 ①查看这两个routes是否一致 const routes:[ ... ] const router = new VueRouter({ routes, }) ②配置中的component是否多加了s { path: '/home', component: Home }, ③导入的文件路径是否正确 const Home = () => import('../vi
vue相同路由跳转强制刷新该路由组件操作
10-14
在Vue.js应用中，路由是...在进行路由跳转和组件刷新时，理解Vue Router的工作原理至关重要，这可以帮助我们编写出更加灵活且可维护的代码。同时，遵循最佳实践和避免常见错误，如路由命名冲突，也能提高应用的质量。
vue通过路由实现页面刷新的方法
08-28
在本文中，我们将探讨通过路由实现页面刷新的方法，解决购物车页面跳转到详情页后返回时的刷新问题。 知识点一：使用 beforeRouteLeave 实现销毁 bus 事件 在 Vue 项目中，使用 bus 事件来实现组件之间的通信是一...
vue 解决路由只变化参数页面组件不更新问题
10-16
在Vue.js应用中，路由是页面之间导航的关键组成部分。当你使用Vue Router进行页面导航时，通常情况下，当路由路径发生变化时，对应的组件也会随之更新。然而，在某些情况下，如果路由只变化了查询参数（即URL中`?`...
关于VUE Router不跳转原因
qq_52721945的博客
09-14 3957
router对关键字是很注重的 不能随意取 它会有内置的一些关键字 对不上关键字是识别不了的（小白个人理解）
vue form表单提交但不跳转页面
c小刺猬
03-11 6196
vue使用@submit.prevent=&quot;&quot;来设置提交时执行的函数，并阻止页面跳转： &amp;lt;form id=&quot;msgForm&quot; action=&quot;http://api.clustar.ai/visitorinfo/&quot; method=&quot;post&quot; @submit.prevent=&quot;sub&quot;&amp;gt;
Vue 面包屑三级路径改变但页面不跳转解决方案
往事随风
12-14 3914
Vue 面包屑三级路径改变但页面不跳转解决方案
点击按钮或链接时不跳转只刷新页面
oe_luna的专栏
12-18 880
点击按钮或链接时不跳转只刷新页面，在某些情况下还是比较实用的，下面整理些不错的示例，感兴趣的朋友可以参考下 详细出处参考：http://www.jb51.net/article/42297.htm
vue-admin无法使用import转动态路由的问题
爬墙少年
03-28 289
使用import方法，可以在首页加载出页面，但是在跳转的时候提示无法找到自定义的module模块，在 router/index.js方法中可以正常加载自定义的页面，但是动态路由显示not find module @views/....这使用这个方法的时候又提示MarkdownEditor模块错误，不知道是拉代码还是什么原因，重新复制一份MarkdownEditor到components下面，重新。
vue使用路由不跳转不报错原因
m0_56553972的博客
01-24 1711
打错了单词找了好久，也不报错
vue3改变路由不跳转案例
你怎么也喜欢嘴巴嘟嘟
09-03 1893
当我们的需求是 界面里面使用的tab切换，每次点击tab切换我们向后端发送一个参数，但是内部我们可以做到，这样的话路由不会自动修改，我们需要使用 router.replace({ name: "路径", query: { id: id, }, }); 官网解释为：跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 ...
vue3-路由能跳转，页面却不跳转
Huanghuali_的博客
01-16 1万+
遇到一个问题整了一天虽然也看出是啥问题，然后我换了种访问路由的方法 就是点击主页超链接还有用户模块超链接，路由改变了，但是主页的内容都不变。（忽略我的页面设计，纯属练手乱配色的） router的路由配置index.js（这边是没问题的） import { createRouter, createWebHistory } from 'vue-router' import Home from '../components/Home.vue' import User from '../components/U
vue路由跳转后不刷新页面
07-22
你可以使用 Vue Router 的 `push` 方法进行路由跳转，它不会刷新页面。这是因为 Vue Router 使用了前端路由的方式进行页面切换，不需要重新加载整个页面。 例如，在你的 Vue 组件中可以这样使用： ```javascript ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值