vue 页面跳转传参


两个页面之间的跳转如果需要传参(例如需要传递当前的id),js里写 window.location.href="xxxxx?id=xx 就可以了;
但是vue不一样 需要操作的是路由,需要用到 VueRouter
使用之前首先要了解 $router$route

$router是一个VueRouter的实例 可以导航到不同的路由里,如下

// 字符串 this.$router.push('/home') // 对象 this.$router.push({ path: '/home' }) // 命名的路由 this.$router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数,变成 /register?plan=private this.$router.push({ path: '/register', query: { plan: 'private' }})

$route$router跳转到的当前一个对象,里面包含当前我们可以获取的path、query、name 、params等属性,如下
在里插入图片描述

因此VueRouter 两种传参方法,

1.第一种传参 name 与 params的结合使用 ,

const id = '123' // 假设id为123 // 利用name和params传参 this.$router.push({ name: 'home', params: { id }}) // -> /home/123 // 也可以直接传参 this,$router.push({ path: `/home/${id}` }) // -> /home/123 // 这里的 params 不生效,因为path要和query搭配 this.$router.push({ path: '/home', params: { id }}) // -> /home 

如果传参时设置name属性,则需要在定义路由规则对象时也要设置name,并且path的值需要有/:id,如果没有/:id,则params传值一刷新页面就没了

// 如果传参设置name属性,则需要在定义路由对象规则时也要设置name { path: '/home/:id', name: 'home', component: Home }

2.第二种传参 path 与 query结合使用 ,

const id = '123' // 假设id为123 // 带查询参数,变成 /home?id=123 this.$router.push({ path: 'home', query: { id }}) 

 

3.跳转后的页面取值用法类似,分别是this.$route.params.idthis.$route.query.id就可以得到id值。

总结:query类似于get传参,params则类似于post,即前者在浏览器地址栏中显示参数,后者则不显示 ,params传参一刷新就没了(如果传的参数在刷新后依旧存在,需要设置/:id),query传参刷新参数还存在


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM