路由参数传递

Posted kanaliya

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了路由参数传递相关的知识,希望对你有一定的参考价值。

传递参数主要有两种类型: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

以上是关于路由参数传递的主要内容,如果未能解决你的问题,请参考以下文章

在路由器vue中传递参数

如何绕过将数据模型传递给片段参数以避免事务太大异常?

Laravel - 通过路由传递参数后Javascript不起作用

将接口从片段传递到kotlin中的活动

问题.beego路由设置及请求参数传递

操作栏选项卡:使用多次实例化的单个片段时如何传递参数