vue params 和 query区别

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

今天我们就来说一下params和query传参的使用和区别，要说这个的话，我们就有必要提一下Vue-router了。
Vue-router它主要分为动态路由（传参匹配的问题），嵌套路由（父子组件之间的通信），编程式路由（this.$router.push(‘绝对路径’)），这三方面的内容都是比较容易的，我们参考官方给出的文档就可以理解的差不多，Vue-router官方文档。
我们今天主要来说比较令人困惑的两点：

1、$route和$router的区别
2、params 和query 的传参及使用


$route和$router的区别


我们首先来看一段代码：

this.$router.push({
        path: '/cart',
        query:{
             goodsid: 123456
             }
        });
this.goodsid = this.$route.query.goodsid;         //123456

从上面的代码段我们能够看出来，$ router是路由操作对象，对要跳转的路由进行编写，而使用$ route我们来从浏览器中读取路由参数，总而言之，$ router只写要跳转的路由， $ route 只读（参数的获取）

params 和query 的传参及使用

params传参的使用

我们先来看看params的使用：

//goodlist.vue
<router-link v-bind:to="{name: 'cart',  params: {goodsid: 123456
        }}">
        显示购物车的页面
</router-link>
//index.js中的路由配置
{
            path: '/cart/:goodsid',
            name: 'cart',
            component: cart, 
}
//cart.vue  获取路由传参
<template>
    <div>
        <p>这个是一个购物车页面</p>
        <span>{{ $route.params.goodsid }}</span>
    </div>
</template>

由以上代码和图片我们可以了解到—使用params传参可以用name引入
那以path引入呢？我们来看看：

//goodlist.vue
<router-link v-bind:to="{path: '/cart',  params: {goodsid: 123456
        }}">
        显示购物车的页面
</router-link>

其余的代码是不变的，但是我们却看不到网页。

所以，params进行路由传参的时候只能由name引入。

query传参的使用

//query传参使用name进行引入
<router-link v-bind:to="{name: 'cart', query: {goodsid: 123456
        }}">
        显示购物车的页面
</router-link>
//获取浏览器中路由的参数
<span>{{ $route.query.goodsid }}</span>
//query传参使用path进行引入
<router-link v-bind:to="{path: 'cart', query: {goodsid: 123456
        }}">
        显示购物车的页面
</router-link>
//获取浏览器中路由的参数
<span>{{ $route.query.goodsid }}</span>

有趣的是，使用path和name引入，结果是一样

所以，query传参的时候，以path，name引入都是OK的

总结（tips）：
1、使用query传参的时候，name，path都可以引入，但使用params传参的时候只能使用name进行引入。
2、接收参数的时候使用this.$ route.params.name或者this.$ route.query.name
3、进行路由跳转的时候，我们使用this.$ router.push('路径')
4、如果index.js配置路由时，我们能看到，params的参数是URL不可或缺的一部分，但是query的参数是拼接起来的，没有也不影响

本文转自:https://blog.csdn.net/rememberyf/article/details/84580834

以上是 vue params 和 query区别 的全部内容， 来源链接： utcz.com/z/377026.html

回到顶部