码迷,mamicode.com
首页 > 其他好文 > 详细

路由参数传递

时间:2020-02-21 12:55:35      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:name   query   ams   file   使用   配置   两种   无法   种类   

传递参数主要有两种类型:params及query

params的类型:

1.配置路由格式:/router/:id
2.传递方式:在path后面跟上对应的值
3.传递后形成的路径:/router/123 /router/abc

<router-link :to="{name:'profile',params:{id:1}}">档案</router-link>
使用代码的方式:
this.$router.push({name:'profile',params: {id:1}})

注意:在添加params对象时,必须搭配使用name(此时不用在router下index.js中对应路由的path内配置‘/:参数‘),而不能使用path,否则在接收参数时无法接收到参数值;如果一定要使用path,则无需使用params,即使添加params对象也没有效果,直接在path在后面以‘/参数‘的形式添加参数,同时在router下index.js中对应path后添加‘/:参数‘即可
接收参数时使用$route.params

query类型

1.配置路由格式:/router,即普通配置
2.传递方式:对象中使用query的key作为传递方式
3.传递后形成的路径:/router?id=123,/router?id=abc

<router-link :to="{path:'/user',query:{id:'1'}}">档案</router-link>
使用代码的方式:
this.$router.push({name:'user',query: {id:'aaa'}})

使用query参数时,使用name或者path均可
接收参数时使用$route.query

路由参数传递

标签:name   query   ams   file   使用   配置   两种   无法   种类   

原文地址:https://www.cnblogs.com/kanaliya/p/12340829.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!