Vue路由跳转、传参、接参四种⽅式⼀、router-link
1. 不带参数
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
<!-- name,path都⾏, 建议⽤name -->
注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始
2.带参数
<router-link :to="{name:'home', params: {id:1}}">
<!--
params传参数 (类似post)
路由配置 path: "/home/:id" 或者 path: "/home:id"
不配置path, 第⼀次可请求，刷新页⾯id会消失
配置path, 刷新页⾯id会保留
html 取参 $route.params.id
script 取参 this.$route.params.id
-->
<router-link :to="{name:'home', query: {id:1}}">
<!--
query传参数 (类似get,url后⾯会显⽰参数)
路由可不配置
html 取参 $route.query.id
script 取参 this.$route.query.id
-
->
⼆、this.$router.push() (函数⾥⾯调⽤)
1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
react router 跳转
3. params传参
this.$router.push({name:'home',params: {id:'1'}})
// 只能⽤ name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ，第⼀次可请求，刷新页⾯id会消失
// 配置path，刷新页⾯id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页⾯ url后⾯会拼接参数，类似?id=1, ⾮重要性的可以这样传, 密码之类还是⽤params刷新页⾯ id 还在params类似 post, 跳转之后页⾯ url后⾯不会拼接参数 , 但是刷新页⾯ id 会消失
三、this.$place() (⽤法同上,push)
四、this.$(n) ()
this.$(n)
向前或者向后跳转n个页⾯，n可为正整数或负整数
五、区别
this.$router.push
跳转到指定url路径，并想history栈中添加⼀个记录，点击后退会返回到上⼀个页⾯
this.$place
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页⾯ (就是直接替换了当前页⾯)
this.$(n)
向前或者向后跳转n个页⾯，n可为正整数或负整数六、⽰例
A页：传递
this.$router.push({
path: '/pay/consume',
query: { userId: userId, userName: userName }
})
B页：接收
console.log(this.$route.query.userId)
console.log(this.$route.query.userName)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。