vue params 和 query区别

今天我们就来说一下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

posted @ 2021-02-28 16:21  叫我汤先森  阅读(642)  评论(0)    收藏  举报