Vue中,点击提交按钮,路由多了个问号

问题

当点击提交按钮是路由多了问号:

http://localhost:8100/#/
变为
http://localhost:8100/?#/

原因

路由中出现问号通常是由于某些路径或参数处理不当造成的。在该情况下,是因为表单的默认行为导致的。提交表单时,如果没有阻止表单的默认提交行为,浏览器会在 URL 中添加问号(?)。

解决方法

解决方案一:

需要在提交的方法中防止表单的默认提交行为。这可以通过在 <form> 标签上使用 @submit.prevent 来实现,这样可以在提交表单时阻止默认行为,同时调用你的提交方法。

当表单被提交时,Vue.js 会调用 enter (你自定义的方法)方法,同时阻止表单的默认提交行为(例如刷新页面或在 URL 中添加问号)。

解决方案二:

button标签指明type=button,这样就不会触发表单的提交行为

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3,你可以使用Vue Router来实现路由跳转。下面是一个简单的示例: 首先,确保你已经安装了Vue Router。可以使用以下命令进行安装: ``` npm install vue-router@next ``` 接下来,在你的Vue应用程序的入口文件(例如main.js),导入Vue Router,并且使用`createRouter`函数创建一个路由实例: ```javascript import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import App from './App.vue' const router = createRouter({ history: createWebHistory(), routes: [ // 在这里定义你的路由配置 // 示例:定义一个名为Home的路由 { path: '/', name: 'Home', component: Home }, // 示例:定义一个名为About的路由 { path: '/about', name: 'About', component: About } ] }) const app = createApp(App) app.use(router) app.mount('#app') ``` 在上面的代码,我们定义了两个路由:'/'和'/about',分别对应了Home和About组件。 然后,在你的组件模板,你可以使用`<router-link>`来创建一个可以点的链接,用于跳转到指定的路由: ```html <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <button @click="goToAbout">Go to About</button> </div> </template> <script> export default { methods: { goToAbout() { this.$router.push('/about') // 或者使用命名路由 // this.$router.push({ name: 'About' }) } } } </script> ``` 在上面的代码,我们使用`<router-link>`来创建两个链接,分别跳转到'/'和'/about'。另外,我们还在按钮的点事件使用`$router.push()`来实现路由跳转,可以传递一个路径或者一个包含名称的对象。 这样,当你点链接或者按钮时,就可以实现路由的跳转了。记得在你的组件引入所需的路由组件(例如Home和About)并进行相应的配置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值