路由传递参数

一、参数有几种写法：

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

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

路由传递参数：

   第一种：字符串形式  params参数（在路由中的search模块需要占位，传递的参数为keywords）  query参数是k=v的形式

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

    第二种：模板字符串

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

    第三种，对象，需要给路由起名字  如：name:'search'

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

路由传递参数的时候，传的是params并且是对象的形式，此时需要写name是多少的形式，不能写path的形式

二、路由传参的相关面试题：

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

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

2.如何指定params参数可传可不传？

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

     如何指定params参数可以传递、或者不传递，在配置路由的时候，在占位的后面加上一个问号【params可以传递后者不传递】

path: '/search/:keyword?', //在占位后边加？代表params参数可传可不传

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

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

 答：使用undefined解决：params参数可以传递、不传递（空的字符串）this.$router.push({name:"search",params:{keyword:''||undefined},query:{k:this.keyword.toUpperCase()}})

4、 路由组件能不能传递props数据？

    //  布尔值写法：只能传递params参数

    // props:true,

    // 对象写法:额外的给路由组件传递一些props

    // props:{a:1,b:2}

    //函数写法：可以params参数、query参数，可以通过props传递给路由组件

    props: ($route) => {

      return { keyword: $route.params.keyword, k: $route.query.k };

    }

  },