vue获取路由参数

人气:290 ℃/2022-11-22 21:02:40

vue中如何获取路由参数?我们一起看看吧!

vue是一套用于构建用户界面的渐进式JavaScript框架。

vue中获取路由参数主要有以下两种方法:

第一种方法:通过query配置

this.$route.query

该方式的弊端在于,在页面间跳转可正常使用,如info、isTrue、func,但是在进行页面刷新时,所有参数值会转化为字符串,如对象info会转化为字符串'[Object Object]',布尔值isTrue会转化为'false',从而导致使用错误。

第二种方法:通过params配置

this.$route.params

params也可以携带任何任意类型的数据,在页面间跳转时,参数在地址栏不可见,可通过输入代码的方式获取,页面刷新后参数消失。

vue中获设置路由参数的方法:

第一种方法:通过query配置

<router-link:to="{name:'login',query:{id:1}}">登录</router-link>

第二种方法:通过params配置

<router-link:to="{name:'register',params:{'name':'San'}}">注册</router-link>

关于vue中如何获取路由参数,我们就分享到这啦!

vue组件获取路由参数

45、怎么定义 Vue-router 的动态路由?怎么获取传过来的动态 参数?

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件,例如,我们有一个 User组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染,那么,我们可以在 vue-router的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。

1、动态路径参数,使用“冒号”开头,一个路径参数,使用冒号标记,当匹配到一个路由时,参数会被设置到 this.$router.params 中,并且可以在每个组件中使用。

2、现在我们知道了可以通过动态路由传参,在路由中设置了,多段路径参数后,对应的值分别都会设置到$router.query 和$router.params 中。

推荐

首页/电脑版/网名
© 2026 NiBaKu.Com All Rights Reserved.