点击按钮实现跳转
path路径跳转
name命名路由跳转（适合path路径长的场景）
path路径跳转 ：
给按钮绑定事件处理跳转
name命名路由跳转：
- 在index.js中配置路由规则时给要跳转到的页面起名字name
- 在首页组件Home.vue中定义函数实现跳转
前边已经学了链接跳转传参的两种方式：查询参数传参（？ query）和动态路由传参（：params）
还有点击按钮跳转（给按钮绑定跳转事件）的两种方式：path路径跳转（push 仅路径或者对象（路径））和命名路由跳转（给要跳转到的组件起名，push 对象（名字））
点击按钮跳转传参：两种跳转方式都具有两种传参方式
path路径跳转的两种传参方式：
- 查询参数传参（query获取参数）
this.$router.push('/路径？参数名1=参数值1&参数名2=参数值2')
this.$router.push({ //对象写法
path: '/路径',
query:{
参数名1：’参数值1‘,
参数名2：’参数值2‘
}
})
- 动态路由传参（params获取参数）
this.$router.push('/路径/参数值')
this.$router.push({
path:'/路径/参数值'
}) //参数值是v-model绑定的输入框值，要反引号
一.path路径跳转 查询参数传参（写法1 ，2）
- 书写要跳转到的组件路由规则 index.js中
- 为button按钮注册点击事件
- 为点击事件编写函数实现跳转
- 跳转到的页面组件{{$router.query.key}}或者在created中this.$router.query.key接收，两个一样，写一个即可
一.path路径跳转 动态路由参数传参（写法1 ，2）
- 书写要跳转到的组件路由规则 index.js中
- 为button按钮注册点击事件
- 为点击事件编写函数实现跳转
- 跳转到的页面组件{{$router.params.words}}或者在created中this.$router.params.words接收，两个一样，写一个即可
name命名路由跳转传参两种方式：
- 查询参数传参（query获取）
this.$router.push({
name:'路由名字',
query:{
参数名1:参数值1,
参数名2:参数值2,
}
})
动态路由传参
this.$router.push({
name:'路由名字',
params:{
参数名:'参数值',
}
})
二. name命名路由跳转查询参数传参
- 书写要跳转到的组件路由规则 index.js中
- 为button按钮注册点击事件
- 为点击事件编写函数实现跳转
- 跳转到的页面组件{{$router.query.key}}或者在created中this.$router.query.key接收，两个一样，写一个即可
二. name命名路由跳转查询参数传参
- 书写要跳转到的组件路由规则 index.js中
- 为button按钮注册点击事件
- 为点击事件编写函数实现跳转
- 跳转到的页面组件{{$router.params.words}}或者在created中this.$router.params.words接收，两个一样，写一个即可
