自己做的网站什么时候可以赚钱,建站平台在线提交表格功能,xml用网页打开乱码,最好的设计师平台网站在Vue应用中#xff0c;利用Vue Router进行页面间的导航是一个常见需求。本篇博客将通过示例代码详细介绍如何在Vue组件中使用JavaScript实现路由跳转#xff0c;包括传递参数的两种方式#xff1a;通过params和query。让我们一步步深入了解。
基础设置
首先#xff0c;确…在Vue应用中利用Vue Router进行页面间的导航是一个常见需求。本篇博客将通过示例代码详细介绍如何在Vue组件中使用JavaScript实现路由跳转包括传递参数的两种方式通过params和query。让我们一步步深入了解。
基础设置
首先确保你的项目中已安装并配置了Vue Router。一个基本的Vue Router配置可能如下所示在router/index.js文件中
import Vue from vue
import Router from vue-router
import Seq from /components/SeqVue.use(Router)export default new Router({routes: [{path: /rd/proj/seq,name: Seq,component: Seq},// 其他路由配置...]
})使用模板内的方法实现跳转
模板部分
在Vue组件的模板中你可以定义一个按钮其点击事件会触发一个函数来执行路由跳转。
templatedivbutton clicknavigateToSeq跳转到Seq页面/button/div
/template脚本部分
在脚本部分我们定义navigateToSeq方法来使用this.$router.push进行路由跳转。这里我们将展示如何传递参数。
使用params传递参数
如果你希望在URL路径中不显示参数可以使用params。
script
export default {methods: {navigateToSeq() {const row { contractNo: 123 }; // 假设这是从某个地方获取的数据this.$router.push({ name: Seq, params: { contractNo: row.contractNo } });}}
}
/script注意使用params时接收参数需要在目标组件的beforeRouteUpdate钩子或通过this.$route.params.contractNo访问。
使用query传递参数
如果你想在URL中以查询字符串的形式显示参数应该使用query。
script
export default {methods: {navigateToSeq() {const row { contractNo: 123 };this.$router.push({ path: /rd/proj/seq, query: { contractNo: row.contractNo } });}}
}
/script使用query时可以通过this.$route.query.contractNo获取参数值。
在目标组件中接收参数
接收params
对于通过params传递的参数在目标组件(Seq.vue)中你可以在created或mounted生命周期钩子或者使用watch来监听$route的变化来获取参数。
export default {created() {console.log(this.$route.params.contractNo); // 访问通过params传递的合同编号}
}接收query
对于query参数获取方式与params相同
export default {created() {console.log(this.$route.query.contractNo); // 访问通过query传递的合同编号}
}通过上述步骤你可以在Vue应用中灵活地使用JavaScript实现页面之间的路由跳转及参数传递无论是隐藏在URL中的参数还是直接展现在查询字符串中的参数都能轻松应对。
