• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

vue路由跳转-参数传递和接收

武飞扬头像
PHP中文网
帮助20

路由跳转

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.idscript 通过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.idscript 取参this.$route.params.id

3.queryparams的区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在

params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanfgjce
系列文章
更多 icon
同类精品
更多 icon
继续加载