vue中传递参数的几种情况 以及相应的面试题

1 第一种 字符串形式

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

2 第二种 模板字符串

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

第三种 对象 切记要给路由起名字

    {
            path:"/search/:keyword",
            component:Search,
            meta:{show:true},
            name:"search",
     }

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

以上 在相应的组件中就可以获取

    <h1>
      params参数----{{$route.params.keyword}}
    </h1>
    <h1>
       query参数----{{$route.query.k}}
    </h1>
</div>

传递参数面试题

面试题1 路由传参（对象写法）path是否可以配合params参数一起使用

不可使用
路由跳转参数的时候 对象的写法可以是name,path形式 但是path这种写法不可以与params参数一起使用

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

面试题2 如何指定params参数可传可不传

比如配置路由的时候 占位了(params参数),但是路由跳转的时候就不传递
如果路由要求传递params参数 但是你就是不传 路由就会有问题
如果指定params参数，或者不传递，在配置路由的时候，在站位的后面加上一个？[params参数可传可不传]

http://localhost:8080/#/?k=QWE
http://localhost:8080/#/search?k=QWE

面试题3
params参数可以传递也可以不传 但是如果传递是空字符串，如何解决
使用undefind解决：params参数可以传递 不传递（空的字符串）

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

面试题4 路由组件能不能传递props参数
可以的 有三种写法

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

在router.js中

 {
            path:"/search/:keyword",
            component:Search,
            meta:{show:true},
            name:"search",
           //布尔值写法 只能传params
             props:true,
            //对象写法 额外的给路由组件传递一些props
             props:{a:1,b:2}
            //函数写法：可以params参数query参数 通过props传递给路由组件
            props:($route)=>{
                return {keyword:$route.params.keyword,k:$route.query.k}
            }```
            }
**在对应的组件中使用**

```bash
export default {
  //路由组件可以传递props的
  props:['keyword','a','b','k']

}

<div>
    <h1>
      params参数----{{$route.params.keyword}} ======={{keyword}}===={{a}}
    </h1>
    <h1>
       query参数----{{$route.query.k}}========{{k}}
    </h1>
</div>