vue Router中params和query传参的使用跟区别

一

//$router:是路由操作对象，只写对象//$route : 路由信息对象，只读对象

//操作 路由跳转

当由这个页面跳转name为hello的组件的时候，传递params为name为word的属性[this.$route.params.](http://this.name=this.$route.params.name)属性获取值

在跳转的页面通过

this.$router.push({

name:‘hello’,

params:{

name:'word',

age:'11'

}

})

//读取 路由参数接收

[this.name=this.$route.params.name](http://this.name=this.$route.params.name)

jquery传参和params传参的区别

1. query可以用name或path来引入

2. params必需要用name来引入，接收参数都是类似的，分别是:

   this.$route.query.name和this.$route.params.name。

2.地址栏表现形式上:query：

params：

3.query传参

// 注意：这是 query 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象

登录

注册

或

注册

等同于：

this.$router.push(’/login?id=10&name=zs’)

this.$router.push({path:’/register’,query:{id:5,name:‘lili’}})

或

this.$router.push({name:‘register’,query:{id:5,name:‘lili’}})

4.params传参

var router = new VueRouter({

routes: [

{ path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id/:name） 刷新页面 参数会消失,页面中就丢失了数据

{ name:'register', path: '/register/:id/:name', component: register }

]

})

// 注意：这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象

登录

注册

等同于：

this.$router.push(’/login/12/ls’)

this.$router.push({name:‘register’,params:{id:10,name:‘lili’}})