@[toc]
7.路由传参
7.1路由跳转有几种方式？
比如：A -> B
声明式导航：router-link（务必要有to属性），可以实现路由的跳转。
编程式导航：利用的是组件实例的$router.push|replace方法，可以实现路由的跳转。（可以书写一些自己的业务）
7.2路由传参，参数有几种写法？
- params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位。
- query参数：不属于路径当中的一部分，类似于ajax中的queryString /home?k=v，不需要占位。
注意点1：路由当中的占位符用的是：，比如path: '/search/:keyword'，其中:keyword就代表参数的占位符
//配置路由
export default new VueRouter({
routes:[
{
path: '/search/:keyword',
component: Search,
meta:{"isShow": true}
}
]
})
注意点2：在路由传参中如果使用params方式且路由传参使用对象方式的话，再进行路由配置时必须设置相应的name属性才行，否则会导致传参失效。
注意点3：标签\中传参使用对象方式，请使用:to="{}"，而不是:to={}
注意点4：路由传参的3种写法
methods:{
//搜索按钮的事件处理函数，用于跳转到search路由组件当中
goSearch() {
//路由传递参数
//第1种：字符串形式
this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase())
//第2种：模板字符串
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
//第3种：对象,其中params和query对象属性中的key属性名称加不加双引号都是可以识别的
this.$router.push({name: 'search', params:{keyword:this.keyword}, query:{k:this.keyword.toUpperCase()}})
}
}
本人其他相关文章链接
1.vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】
2.vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
3.vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
4.vue尚品汇商城项目-day01【3.项目路由的分析】
5.vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
6.vue尚品汇商城项目-day01【5.路由组件的搭建】
7.vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
8.vue尚品汇商城项目-day01【7.路由传参】
9.vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
