vue-router中 query传参和params传参的使用和区别讲解
作者：alokka
这篇文章主要介绍了vue-router中 query传参和params传参的使用和区别讲解,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
时隔一年，发现自己回来看自己写的文档都看得云里雾里，这次我在重新改善下这篇文章，希望这篇文章能给大家一些帮助
-2019/12/26
1.query传参：
1.query传参
路由：
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ name:'register',path: '/register', component: register }
]
})导航：
// 注意：这是 query 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link>
或
<router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link>
等同于：
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'}})注意：jquery可以通过name或path来引入路由
2.params传参
2.params传参
路由：
var router = new VueRouter({
routes: [
{ path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id/:name） 刷新页面 参数会消失,页面中就丢失了数据
{ name:'register', path: '/register/:id/:name', component: register }
]
})导航：
// 注意：这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
<router-link to="/login/12/ls">登录</router-link>
<router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
等同于：
this.$router.push('/login/12/ls')
this.$router.push({name:'register',params:{id:10,name:'lili'}})注意：params只能通过name来引入路由，path会undefined
jquery传参和params传参的区别
1.用法上:
- 上文已经提到query可以用name或path来引入
- params必需要用name来引入，接收参数都是类似的，分别是:
this.$route.query.name和this.$route.params.name。
2.地址栏表现形式上:
query：
params：
注意：这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失
到此这篇关于vue-router中 query传参和params传参的使用和区别的文章就介绍到这了,更多相关vue-router query和params传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！