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 传参不会显示在地址栏,刷新页面时参数会消失,可以考虑使用本地存储解决。

你可能感兴趣的