在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/seq'
vue.use(router)
export default new router({
routes: [
{
path: '/rd/proj/seq',
name: 'seq',
component: seq
},
// 其他路由配置...
]
})
使用模板内的方法实现跳转
模板部分
在vue组件的模板中，你可以定义一个按钮，其点击事件会触发一个函数来执行路由跳转。
脚本部分
在脚本部分，我们定义navigatetoseq方法来使用this.$router.push进行路由跳转。这里，我们将展示如何传递参数。
使用params传递参数
如果你希望在url路径中不显示参数，可以使用params。
注意，使用params时，接收参数需要在目标组件的beforerouteupdate钩子或通过this.$route.params.contractno访问。
使用query传递参数
如果你想在url中以查询字符串的形式显示参数，应该使用query。
使用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中的参数还是直接展现在查询字符串中的参数，都能轻松应对。
