vue 中的query传参与params传参

Vue router 如何传参

params、query 是什么？

• params：/router1/:id，这里的 id 叫做 params。例如/router1/123, /router1/789
• query：/router1?id=123，这里的 id 叫做 query。例如/router1?id=456

query 方式传参和接收参数
传参: this.$router.push(path{:}^{\prime }/xx{x}^{\prime }query:id:id)this.$router.push 传参时, 并不会引起页面刷新。需要重新请求数据，代码如下。

<div>shopName:{{shop.shopName}}</div>
export default{
    data(){
        return {
            shop:{shopName:"shopName"},
            shopNo:"123"
        };
    },
    mounted(){
        // 初始时加载店铺数据
        this.loadShop();
    },
    watch:{
        // shopNo改变时重新加载
        shopNo:function(newShopNo){
            this.loadShop();
        }
    },
    methods:{
        loadShop(){
            // 调用API获取shop数据
            var shop = {/*获取到的数据*/};
            this.shop=shop;
        }
    }
}

接收参数: this.$route.query.id

params 方式传参和接收参数

params 传参 路由界面： router.js: 路由设置这里，当你使用 params 方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用 query 方法，就没有这种限制，直接在跳转里面用就可以

传参: this.$router.push(name{:}^{\prime }xx{x}^{\prime }params:id:id)接收参数:this.$route.params.id

注意：如果路由上面不写参数，也是可以传过去的，但不会在 url 上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失（如下图所示），那依赖这个参数的 http 请求或者其他操作就会失败。

query 传参和 params 传参的区别

• 用法上的： query 要用 path 来引入，params 要用 name 来引入，接收参数都是类似的，分别是 this.$route.query.name和this.$route.params.name。注意接收参数的时候，已经是$route而不是$router 了哦！！
• 展示上的： query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示所以两者不能同时使用！！！