本篇文章为大家展示了在vue中使用查询和参数传参的区别有哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强> vue路由器如何传参
<强>参数,查询是什么?
参数:位于//:id、/router1/123/router1/789这里的id叫做参数
查询:位于/?id=123,位于/?id=456,这里的id叫做查询。
<强>路由界面:
路由器。js:
路由设置这里,当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用查询方法,就没有这种限制,直接在跳转里面用就可以。
& lt; template>
,& lt; div 类=癮pp_page"比;
,& lt; h2>从这个路由传参到别的路由& lt;/h2>
,& lt; router-link :=皗,名字:& # 39;位于# 39;,参数:,{,id: status , id2:, status3},查询:,{,queryId: status2 }}“,在
位于router-link才能跳转
,& lt;/router-link>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:& # 39;app_page& # 39;
,data (), {
,return {
状态:110年,才能
status2:120才能,
status3:119才能
,}
},
}
& lt;/script>
<强>编程式导航跳转:
上面的router-link传参,也可以使用路由器文档里面的编程式导航来跳转传参。
这两种传参效果是一模一样的,编程式导航,可以用来做判断跳转,比如是否授权,是否登录,等等状态,对此不太了解的小伙伴们,可以跳过这个编程式导航,以后再来看。
组件2:
传参还是比较简单的,按着上面组件的使用方法就可以成功传过去了。
提示:获取路由上面的参数,用的是美元,后面没有r。
<强>参数传参和查询传参有什么区别:,
1,用法上的
刚查询要用路径来引入,参数个数要用名字来引入,接收参数都是类似的,分别是这样。美元route.query.name和route.params.name美元。
注意接收参数的时候,已经是美元的路线而不是路由器了美元哦! !
2,展示上的
查询更加类似于我们ajax中获得传参,params则类似于帖子,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示查询:
& lt; router-link :=皗,名字:& # 39;位于# 39;,参数:,{,id:地位}}“,在正确& lt;/router-link>
& lt; router-link :=皗,名字:& # 39;位于# 39;,参数:,{,id2:地位}}“祝辞错误& lt;/router-link>
4,参数,查询不设置也可以传参,参数个数不设置的时候,刷新页面或者返回参数会丢失
