vue路由跳转的时候，链接里面添加了 问号

最新推荐文章于 2024-05-27 20:26:39 发布
最新推荐文章于 2024-05-27 20:26:39 发布
阅读量4.2k 收藏 5
点赞数 8
分类专栏： vue 文章标签： vue路由跳转的时候，链接里面添加了 问号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Miss_liangrm/article/details/100580965
版权

vue路由跳转、提交的时候，链接里面添加了 问号 。

栗子：

原链接：

http://localhost:8081/#/BroadbandPay

提交后里链接：

http://localhost:8081/？#/BroadbandPay

 

分析原因：你使用了 form 表单。 应该在 onSubmit 时 阻止下冒泡或默认事件 就可以了。

解决方法：使用click.prevent阻止默认事件，就好了。
                  栗子：<button @click.prevent="btn">登录</button>

 

柠檬不萌只是酸i
关注
专栏目录
九、vue3.0路由配置及跳转
张先森的博客
06-20 4286
vue3.0路由配置及跳转
21.Vue3.x中的路由(2) 动态路由 get传值 js跳转路由
05-17 407
一、动态路由 在route.ts中配置动态路由，传递参数需要在path后面加 “/:xxx” { path:'/newscontent/:title', component:NewsContent } import NewsContent from "@/components/NewsContent.vue"; // 配置路由 const router=createRouter({ history:createWebHashHistory(), routes:[
解决关于 vue项目中 点击按钮路由多了个问号
weixin_34085658的博客
10-21 657
问题描述： 在vue项目开发过程中，点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login   原因： 这里是 form 表单，点击了button 按钮，触发了他的默认事件，就是触发了提交这个行为。   解决方案 使用@click.prevent 阻止默认事件 &lt;button @click.prevent="btnClick"&gt;获得验证码&lt;...
Vue中，点击提交按钮，路由多了个问号
最新发布
m0_74462339的博客
05-27 397
问题原因路由中出现问号通常是由于某些路径或参数处理不当造成的。在该情况下，是因为表单的默认行为导致的。提交表单时，如果没有阻止表单的默认提交行为，浏览器会在 URL 中添加问号（?
解决关于 vue项目中 点击提交按钮路由多了个问号
森海北屿 ღ
03-09 2334
问题描述： 在vue项目开发过程中，新建参数表以表单形式提交，发现页面重新刷新，路径中多了问号 http://localhost:8100/#/ 改变为 http://localhost:8100/?#/ 导致路由跳转出现问题。 原因： 这里是 form 表单，点击了button 按钮，触发了他的默认事件，就是触发了提交这个行为。 解决方案 使用@click.prevent 阻止默认事件 &lt...
vue项目中点击登录跳转，url中自动加上了问号
qq_40244663的博客
12-18 3213
vue项目中点击登录跳转，url中自动加上了问号 问题描述： 当我登录系统的时候，页面的确跳转了，但是浏览器地址栏的url里多了一个问号，而这并不影响页面显示，像下面这样 原因： <form action=""> <div class="login_box_input"> <input type="text" class="form-control pull-left" v-model="loginData.user_name"> <input
Vue 路由
u010723080的博客
06-09 316
示例代码： <body> <script src="./vue.js"></script> <script src="./vue-router.js"></script> <div id="app"> <router-view></router-view> </div> <script> var templat
vue 中input键盘回车事件查询导致页面刷新的问题，路由多了一个问号
Oo_Nebula的博客
10-22 377
问题： <el-form @submit.native.prevent> <el-form-item > <el-input @keyup.enter.native="handleInputConfirm(obj)" > </el-input> </el-form-item> </el-form> export default { m
搭配Vue路由(上)和Vue路由(下)博客学习
10-21
在这个"搭配Vue路由(上)和Vue路由(下)博客学习"中，我们将深入探讨Vue Router的基础知识，包括它的安装、配置以及如何实现路由参数的传递。 首先，Vue Router的安装通常通过npm或yarn在项目中添加依赖。一旦安装...
vue路由传参页面刷新参数丢失问题解决方案
10-16
在Vue.js应用中，路由传参是一种常见的功能，用于在不同组件之间传递数据。然而，当页面被刷新时，通过`params`或`route`属性配置传递的参数可能会丢失，这是一个常见的问题。本文将详细讲解这个问题以及如何解决。 ...
vue路由+脚手架
Lin_25937的博客
10-11 2819
vue路由，脚手架
vue项目中点击非刷新按钮，页面刷新并且路由多了个问号解决方案
weixin_44867704的博客
07-19 521
问题描述 在vue项目开发过程中，点击查询或重置按钮，结果页面刷新了一遍，发现路径变成了 localhost:8080/?#/advanced 原因 这是因为在 form 表单里，点击了button 按钮，触发了表单的默认事件，也就是触发了提交行为。 解决方案 使用 @click.prevent 阻止默认事件即可 <button @click.prevent="handleCheck">查询</button> 或者不要 form 标签 ...
vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置
qq_44552416的博客
01-10 4634
如果浏览器支持History API，那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径，从而可以实现前端路由，而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。我们在vue2中，默认情况下出现#号的，是因为Vue 的 router 默认是 hash 模式，在 hash 模式下，是会有#号在URL上；在 router 的 index.js 页面内，mode 默认是 hash，修改为 history。
路由里增加了一个问号【问题解决】
cy1502的博客
02-16 609
测试反馈：点击按钮没有调用接口；复现的时候发现点击按钮之后页面重新刷新了一遍，调用的接口状态为faile（被取消），再次点击按钮接口调用恢复正常。 发现问题 首次点击才刷新，两次网址有改变. 原网址：http://localhost:8080/#/businessManagement 改变后网址：http://localhost:8080/?#/businessManagement 解惑博客：https://blog.csdn.net/Miss_liangrm/article/details/1.
vuejs router路由的使用
Gcalolin的博客
09-17 1348
最近写项目的时候，每天都在接触路由，特来整理一下，理清思路。 路由文件 router.js,然后在main.js中引入。export default { routes: [ path: '', name: '', components: '' ], ...... }路由的懒加载： component:
localhost链接出现问号？
weixin_45267223的博客
08-14 187
localhost链接出现问号？ 主要是将登录按钮中的type错写成submit，应该改为button
用react-router出现#,点击提交之后成了?#不跳转问题
weixin_39713093的博客
02-16 498
用react-router出现#,点击提交之后成了?#不跳转问题
vue路由的问号方式传参
weixin_43930256的博客
12-05 3259
vue路由的问号方式传参
路由跳转可能存在的问题
马大哈的博客
07-09 814
路由重复跳转存在的问题
vue 路由携带参数
08-16
### 回答1： 在 Vue 路由中携带参数可以通过两种方式实现： 1. 使用动态路由，即在定义路由的时候通过`:id`等方式定义参数，例如： ``` { path: '/user/:id', component: User } ``` 在跳转到该路由时，需要使用`router-link`组件或`this.$router.push()`方法传递参数，例如： ``` <router-link :to="{ path: '/user/123' }">Go to User</router-link> this.$router.push({ path: '/user/123' }) ``` 在组件中可以通过`$route.params.id`获取参数。 2. 使用查询参数，即在定义路由时使用`?`定义参数，例如： ``` { path: '/user', component: User } ``` 在跳转到该路由时，需要使用`router-link`组件或`this.$router.push()`方法传递参数，例如： ``` <router-link :to="{ path: '/user', query: { id: '123' } }">Go to User</router-link> this.$router.push({ path: '/user', query: { id: '123' } }) ``` 在组件中可以通过`$route.query.id`获取参数。 ### 回答2： 在Vue中，路由携带参数可以通过动态路由和查询参数两种方式实现。 1. 动态路由： 动态路由是通过在路由路径中添加参数来实现的，参数被包裹在冒号(:)符号中。在定义路由时，可以在路由路径中使用参数占位符。 例如，在定义一个包含参数的路由时： ```javascript { path: '/user/:id', name: 'user', component: User } ``` 在这个例子中，`id`是一个参数占位符，它可以接收任意字符串。当路由跳转到`/user/123`时，`123`就是`id`参数的值。在组件中使用`$route.params`可以获取路由传递的参数。 例如，在上述的`User`组件中，可以使用`this.$route.params.id`来获取`id`参数的值。 2. 查询参数： 查询参数是通过在路由路径末尾添加参数来实现的，参数以问号(?)分隔，并且以键值对的形式出现。 例如，在定义一个包含查询参数的路由时： ```javascript { path: '/user', name: 'user', component: User } ``` 在这个例子中，可以通过访问`/user?id=123`来传递查询参数。在组件中使用`$route.query`可以获取查询参数。 例如，在上述的`User`组件中，可以使用`this.$route.query.id`来获取`id`参数的值。 无论是使用动态路由还是查询参数，都可以在路由跳转时通过编程式导航的方式传递参数。 例如，在使用动态路由的情况下，可以使用`this.$router.push({ name: 'user', params: { id: 123 } })`来跳转到带有参数的路由。 在使用查询参数的情况下，可以使用`this.$router.push({ name: 'user', query: { id: 123 } })`来跳转到带有查询参数的路由。 ### 回答3： Vue 路由携带参数是指在使用 Vue Router 进行页面跳转时，可以将一些信息以参数的形式传递给目标页面。在 Vue Router 中，我们可以通过在路由路径中定义参数，或者通过在路由对象中添加参数，来实现路由的参数传递。 一种常见的方法是在路由路径中定义参数。通过在路由配置中使用冒号（:）来指定参数的名称，然后在跳转时在路由路径中传递参数的值。例如： ``` const router = new VueRouter({ routes: [ { path: '/user/:id', name: 'user', component: User } ] }) ``` 在上面的示例中，参数的名称是 `id`，路径为 `/user/:id`。当跳转到 `/user/123` 这个路径时，参数的值就是 `123`。在目标页面中，可以通过 `this.$route.params.id` 来获取参数的值。 另一种方法是通过在路由对象中添加参数来传递。在使用 `router.push` 或 `router.replace` 方法跳转路由时，可以在第二个参数中添加一个对象，作为参数传递给目标页面。例如： ``` router.push({ name: 'user', params: { id: 123 } }) ``` 在上面的示例中，`name` 属性指定了目标页面的路由名称，`params` 属性中的 `id` 对应上面定义的参数名称。在目标页面中，可以通过 `this.$route.params.id` 来获取参数的值。 通过以上两种方式，我们可以在 Vue 路由中方便地携带参数进行页面跳转和参数传递。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柠檬不萌只是酸i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值