vue中params与query的区别是什么

一. params方式：

类似于post请求，传递的数据不会在浏览器地址显示

params路由传参分为三步：

（1）绑定参数

{
    path: '/mypath/:web?',
    name: 'mypath',
    component: () => import('../views/mypath'),
    meta:{
        title:"dvy.com.cn"
    }
}
// web后的?问号表示可选 例：对象传值时使用：web:''|| undefined 这里表示传空或不传

（2）发送数据

// 字符串写法：
<router-link :to="`/mypath/dvy.com.cn`">...</router-link>
// 对象写法：
<router-link :to="{name:'mypath',params:{web:'dvy.com.cn'}}">

// 或者

this.$router.push({name:"mypath",params:{web:"dvy.com.cn"}}); // 传递参数

（3）接收数据

在路由页面使用this.$route.params.web接收传递过来的参数

this.$route.params.web; // 接收

使用 params 传参只能由 name 引入路由，如果写成path或者绑定参数时路由不写name页面会显示undefined报错。

二、query

类似与get请求，传递的数据会在浏览器地址显示。

query 传参分文两步:发送-接收（不需要再路由中配置）

（1）发送参数（数据）

// 字符串写法：
<router-link :to="`mypath?web=dvy.com.cn`">
// 对象写法：
<router-link :to="{name:'mypath',query:{web:'dvy.com.cn'}}">
<router-link :to="{path:'/mypath',query:{web:'dvy.com.cn'}}">

// 或者
this.$router.push({name:"mypath",query:{web:"dvy.com.cn"}}); // 传递参数
this.$router.push({path:"/mypath",query:{web:"dvy.com.cn"}}); // 传递参数

（2）接收参数（数据）

this.$route.query.web; // 接收参数

区别：

1. params传参
   只能用 name，不能用 path，即：path写法不能与params参数一起使用（不起作用）
   例如：this.$router.push({ path:"/mypath", params:{web:"dvy.com.cn"} })这是错误的，根本没法跳转
   地址栏是否显示：地址栏不显示参数名称 web，但是有参数的值。
   接收：this.$route.params.web
2. query传参
   name 和 path 都能用。用 path 的时候，提供的 path 值必须是相对于根路径的相对路径，而不是相对于父路由的相对路径，否则无法成功访问。
   地址栏是否显示：地址栏显示参数格式为?web=dvy.com.cn
   接收：this.$route.query.web
3. 小结：query 传参都是显示在 url 地址栏中，在刷新页面时参数不会消失，而 params 传参不会显示在地址栏，刷新页面时参数会消失，可以考虑使用本地存储解决。