编程式导航：通过 JS 的方式实现路由跳转
如何实现点击按钮跳转？
一、不传参：
1. 通过 path 路径跳转（简易方便）
① 简写：
按钮的点击事件中写 this.$router.push ( ' /路由路径 ' ) 比如：this.$router.push ( ' /search ' )
② 完整写法：
this.$router.push ({
path : ' /路由路径 '
})
2. name 命名路由的方式跳转（适合 path 路径长的场景）
第①步 给路由起名字:
const router = new VueRouter({ routes: [ { name : ' haha ' , path : ' /find ' , component : Find }, ], })第②步 按钮的点击事件中写：
this.$router.push ({
name : ' 路由名 ' （比如 name : ' haha '）
})
二、 传参：
1. path 路径跳转传参 之 查询参数传参（如果其他页面要接收传过来的参数，可以用 $route.query.参数名）
① this.$router.push (' /路径 ? 参数名1 = 参数值1 & 参数名2 = 参数值2 ')
②
this.$router.push ({
path : ' /路径 ' ,
query : {
参数名1 : 参数值1 ,
参数名2 : 参数值2
}
})
2. path 路径跳转传参 之 动态路由传参（如果其他页面要接收传过来的参数，可以用 $route.params.参数名）
注：动态路由传参需要配路由
① this.$router.push ( ' /路径/参数值 ' )
②
this.$router.push ({
path : ' /路径/参数值'
})
3. name 命名路由跳转传参 之 查询参数传参（如果其他页面要接收传过来的参数，可以用 $route.query.参数名）
this.$router.push ({
name : ' 路由名 ' ,
query : {
参数名1 : 参数值1 ,
参数名2 : 参数值2
}
})
4. name 命名路由跳转传参 之 动态路由传参（如果其他页面要接收传过来的参数，可以用 $route.params.参数名）
this.$router.push ({
name : ' 路由名 ' ,
params : {
参数名 : 参数值
}
})
标签：传参,编程,参数,跳转,push,router,路由 From： https://www.cnblogs.com/gagaya2/p/17758260.html