query参数和params参数的区别与联系

query参数

query参数通过进行拼接，最终结果会在地址栏进行显示，【刷新之后也会存在，会有缓存】

query参数传递的时候需要与path进行绑定

<!-- 跳转并携带query参数，to的字符串写法 -->

<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

<!-- 跳转并携带query参数，to的对象写法 -->

<router-link :to="{

path:'/home/message/detail',

query:{ id:666, title:'你好'

}

}">跳转</router-link>

接收的参数可以在路由中找到

$route.query.id

$route.query.title

params参数 ：在路由里面进行拼接 

直接通过  /：携带的参数的名字    进行拼接，通过 $route.params；来进行接收

不会在地址栏进行显示，刷新页面之后参数就会消失 【这里并不说明params参数一定不会在地栏栏进行显示】

path:'/detail/:id?:title'     路径detail后面有两个参数是 【id  title】

params参数传递

<!-- 跳转并携带params参数，to的字符串写法 -->

<router-link :to="/home/message/detail/666/你好">跳转</router-link>

<!-- 跳转并携带params参数，to的对象写法 -->

<router-link :to="{

name:'xiangqing',

params:{ id:666, title:'你好'

}

}" >跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

params 参数在配置路由的时候必须进行声明接收，不然是不能获取到参数的

总结：

1.传参的方式不同 query通过?和&拼接 params通过/拼接

2 query会在地址栏中显示 params虽然也会在地址栏中显示，但是需要在路由匹配规则里面去定义定义方式为 路由名称/：参数1/：参数2

3. query在页面刷新的时候仍然会保留参数 params在刷新的时候参数会丢失通常要结合本地储存使用