Vue路由传递参数相关面试题

190 阅读1分钟

1.Vue如何指定params可传可不传?

配置路由的时候,在占位的后面加上一个问号

path:"/search/:keyword?"

2.路由传递参数(对象写法)path是否可以结合params参数一起使用?

不可以。不能这样书写,程序会崩掉

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

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

使用undefined解决。如果指定name与params配置, 但params中数据是一个"", 无法跳转,路径会出问题

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

可以。有三种写法。

  1. 布尔值写法。
params:true/false
  1. 对象写法,可以给路由组件额外传递一些props参数。
props:{a:1 b:2}

3.函数写法,可以是params,也可以是query参数,通过props传递给路由组件。

props:($route)=>({keyword:$route.params.keyword,k:$route.query.k})

5.路由组件和非路由组件的区别

  1. 路由组件一般放置在pages或者views文件夹,非路由组件一般放置在components文件夹中
  2. 路由组件一般需要在router文件夹中进行注册
  3. 注册完路由,不管路由组件还是非路由组件身上都有route和router属性

6. $route和$router 的区别

  1. $route:一般获取路由信息【路径、query、params等等】
  2. $router:一般进行编程式导航进行路由跳转【push|replace】