vue学习的第九天——传递参数

前言：在第七天的时候我们学习了路由跳转，但是在很多路由跳转不可能只是跳转这么简单，往往跳转的时候还会携带参数过，所以今天在路由跳转的基础上学习传递参数。

一.写好路由跳转

今天我写了两种跳转携带参数的方式分别绑定了事件toindex1与toindex2

 

 下面来看看toindex1与toindex2分别写了什么

toindex1:function(){
        this.$router.push({
             name:"index",
             path:"/index",
             query:{id:12}
        })
        },


//options为形参，而在data里面定义的为实参
        toindex2:function(options){
        this.$router.push({
            name:"index",
            path:"/index",
            query:{
                id:options,
            }
        })
        }

由此可见toindex1的传参是固定的12 ，而toindex2的传参是键盘上输入的值通过双向绑定值到num1上再以形参的方式通过query传给跳转的页面。

此时参数已经传到了index页面，我们就可以在index页面里面去接受参数

 

 再显示到页面上 

 

 

二.query与params的区别

首先query与params都是作用与传参但是他们之间却有着不同

1.query传过来的参数会显示到地址栏中 而params传过来的参数不会显示到地址栏中 直白的来说 query相当于get请求，而params相当于post请求

 

2.两者中query在刷新页面的时候参数不会消失 但params在刷新页面的时候参数会消失 可以考虑本地存储解决此问题（但是在公司工作的时候很多大佬都在使用query

多一点）