可以通过以下步骤实现:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/page1',
name: 'Page1',
component: Page1
},
{
path: '/page2',
name: 'Page2',
component: Page2
},
// 其他页面的路由规则
]
})
在上述代码中,routes
数组中定义了不同页面的路由规则,包括路径(path
)、名称(name
)和对应的组件(component
)。
router-link
组件创建提交按钮,并使用router.push()
方法进行页面重定向。<template>
<div>
<!-- 其他表单元素 -->
<button @click="redirectToPage1">提交</button>
</div>
</template>
<script>
export default {
methods: {
redirectToPage1() {
this.$router.push({ name: 'Page1' })
}
}
}
</script>
在上述代码中,@click
事件绑定了redirectToPage1
方法,当用户点击提交按钮时,会调用该方法,然后使用this.$router.push()
方法将用户重定向到名为Page1
的页面。
new Vue({
router,
render: h => h(App)
}).$mount('#app')
通过以上步骤,使用vue.js按下提交后将用户重定向到不同的页面的功能就可以实现了。
对于这个功能,推荐使用腾讯云的云服务器(CVM)来部署Vue.js应用。腾讯云的云服务器提供稳定可靠的计算资源,适用于各种规模的应用。您可以通过以下链接了解更多关于腾讯云云服务器的信息:腾讯云云服务器产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云