路由跳转及传参

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

路由跳转及传参

2023-04-11 14:08:00 来源：博客园

meta字段：路由元信息

路由跳转有几种方式：

A->B

【资料图】

1.声明式导航：router-link（务必要有to属性），可以实现路由的跳转。

2.编程式导航：利用的是组件实例得$router.push | replace方法，可以实现路由的跳转。（可以书写一些自己的业务）

params参数：keyword ， query参数： k

路由传参，参数的写法：

1.params参数：属于路径中的一部分，需要注意，在配置路由时，需要占位，如果想要制定params参数可传可不传，就在占位符后加 " ？"。

{     //用:keyword占位      path:"/search/:keyword", //  path:"/search/:keyword?"  加了问号表示params参数可传可不传      component: Search,      meta: {show: true},      name: "search",},

2.query参数：不属于路径当中的一部分，类似于ajax中的queryString / home?k=v&kv=,不需要占位

路由传参的方式：

第一种：字符串模式（不需要给路由取名name）

this.$router.push("/search/" + this.keyword +"?k="+ this.keyword.toUpperCase())

第二种：模板字符串（不需要给路由取名name）

this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)

第三种：对象（需要给路由取名name，写法可以是path、name形式，但是path这种写法不能和params参数一起使用，params只能与name一起用）

this.$router.push({   name:"search",params: {keyword: this.keyword || undefined}, query: {k: this.k}})

关键词：