vue路由跳转-参数传递和接收
路由跳转
1.声明式路由跳转
(不带参数)
通过router-link
标签进行跳转,使用name
或者path
都可以,在dom
结构中会被渲染成a
标签
注意:router-link
中链接如果是’/
‘开始就是从根路由开始,如果开始不带’/
’,则从当前路由开始。
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
注意:params
传参数 (类似post
)
路由配置 path: "/home/:id"
不配置path
,路由跳转可请求,刷新页面传递的参数会丢失,
配置path
,刷新也买你id会被保留
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">
获取路由跳转传递的参数:html
通过 $route.params.id
, script
通过this.$route.params.id
2.编程式路由跳转
1.字符串形式
router.push('home')
2.对象形式
router.push({ path: 'home' })router.push({ name: 'user'})
3.函数内调用
(不带参数)
this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})
(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
(params
传参)
只可以使用name
this.$router.push({name:'home',params: {id:'1'}})
html
取参$route.params.id
, script
取参this.$route.params.id
3.query
和params
的区别
query
类似 get
, 跳转之后页面 url
后面会拼接参数,类似?id=1
, 非重要性的可以这样传, 密码之类还是用params
刷新页面id还在
params
类似 post
, 跳转之后页面 url
后面不会拼接参数 , 但是刷新页面id
会消失
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfgjce
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01