路由跳转和传参

路由传参

路由跳转有两种方式：

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

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

8.2:路由传参，参数有几种写法?

params参数:属于路径当中的一部分，需要注意，在配置路由的时候，需要占位，例如

path: " /searchf/: keyword"

第一种写法：字符串形式

this.$router.push(" /search/" + this.keyword)

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

eyword+"?k="+this.keyword.toUpperCase());

第二种写法：模板字符串形式

this.$router.push(‘/search/$ {this.keyword}?k=${this.keyword.toupperCase(l

第二种写法：对象形式（得注意name搭配）

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

路由传参相关面试题

1:路由传递参数（对象写法）path是否可以结合params参数一起使用?

!A：不可以，由跳由传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用

2:如何指定params参数可传可不传?

A：如果路由要求传递params参数，但是你就不传递params参数，发现一件事情，URL会有问题的

比如:配置路由的时候，占位了(params参数），但是路由跳转的时候就不传递。路径会出现问题

http:// localhost:8080/# / ?k=QwE

http:/ / localhost:8o80/# / search?k=QWE

那么如何指定params参数可以传递或者不传递呢？答案是在配置路由的时候，在占位的后面加上一个问号即可

As:path: " /search/ :keyword?"

3 :params参数可以传递也可以不传递，但是如果传递是空串，如何解决?

A：使用undefined解决: params参数可以传递、不传递(空的字符串）

this.$router.push({ name : ’ seanch’,params: {fkeyword:"’ ||undefined } , query:{fk:this.keyword.toupperCasen.

4:路由组件能不能传递props数据?

A：可以