params/query传参

一、路由传参

params参数：属于路由中的一部分，在配置路由的时候，必须占位 在下面一个代码就是占位

query参数：不属于路由当中的一部分，类似于ajax中的queryString(/home?a=1&b=2)

    //第一种：字符串形式
    this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase());
    //第二种：模板字符串
    this.$router.push(`/search/${this.keyword}?k=${ this.keyword.toUpperCase()}`);
    //第三种：对象
    this.$router.push({
        name:"search",
        params:{keyword:this.keyword},
        query:{k:this.keyword.toUpperCase()}
    })
    /*
        注意：使用对象形式配合params传参时，必须使用name属性，不能使用path属性
             name 是配置路由时给 path 取的别名，方便使用
             
        $router : 是路由操作对象，只写对象
        $route : 路由信息对象，只读对象
    */

params和query区别：

1.query可以通过name属性或者path属性来引入路由，而params只能通过name属性来引入路由；在使用params传递时如果指定了path属性而没有name属性，那么界面能成功跳转但是不能接受到传递过来的参数 2.query传递参数时会地址栏会发生改变，传递参数会携带在路径中，而params则不会 3.在刷新界面时，query传递的参数不会丢失，而params会丢失
params相对于query的优点就是传的参数不会在地址上显示

二、路由传参相关题

1.如何指定params参数可传可不传

在配置路由的时候，在占位的后面加上一个？即可

export default {
    routes:[
        {
            path:'/search/:keyword?'
        }
    ]
}

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

//使用undefined解决
this.$router.push({
        name:"search",
        params:{keyword:"" || undefined}, //当传递为空串时候，加个undefined
        query:{k:this.keyword.toUpperCase()}
    })

3.路由组件能不能传递props数据？

能

是传递props数据，以props形式接受，不是将父传子数据传给路由的意思

优点：在获取时对应的组件中使用方便不用$route.query/params.属性名获取值

• search组件中

 

export default {
    routes:[
        {
            path:'/search/:keyword?'
​
                //第一种：布尔值写法(只准传params参数，不准传query参数)
                props:true 
                //第二种：对象写法
                props:{a:1,b:2}
                //第三种：函数写法(可以传params、query参数)
                props:($route) => {
                    return {
                        //获取到$route的数据
                        keyword:$route.params.keyword,
                        k:$route.query.k
                    }
                }
              
        }
    ]
}
   search组件中
   <h1>{{变量名}}</h1>
  //传递参数后同时也要在相关组件接收 这里的组件是search
   props:['变量名']