vue-router 路由传参 params 和 query

最新推荐文章于 2024-12-12 17:17:57 发布

Dwyane、

最新推荐文章于 2024-12-12 17:17:57 发布

阅读量909

点赞数 3

分类专栏： VUE 文章标签： vue web javascript html vue.js

本文链接：https://blog.youkuaiyun.com/qq_46007966/article/details/106472473

版权

VUE 专栏收录该内容

7 篇文章

订阅专栏

本文详细解析了Vue Router中params与query两种传参方式的区别。params在路由配置时需明确参数，适用于URL路径固定的场景，而query则更灵活，直接在URL中附加参数。文章还介绍了各自的配置、跳转方法、URL显示特点及参数获取方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、params和query理解

params方法传参的时候，要在路由后面加参数名占位；并且传参的时候，参数名要跟路由后面设置的参数名对应。

/user/:uname    这个路由匹配/user/wade, /user/james  这里的 uname 叫 params

query方法，就没有这种限制，直接在跳转里面用就可以。

/user?uname=wade  /user?uname=james  这里的 uname 叫 query

二、query和params的用法

1.params:

1.1 路由配置：

// 使用params传参，路由配置的时候 path 要带上参数
{
   path: '/user/:uname',
   name: "users",
   component: User    //这个 User 是组件名称
 }

1.2 跳转方式：

// 方法1：
<router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
// 方法2：
this.$router.push({name:'users',params:{uname:wade}})
// 方法3：
this.$router.push('/user/' + wade)

1.3 页面url显示：params在浏览器地址栏中不显示参数名称

1.4 获取参数方式:

this.$route.params.uname

2.query:

2.1 路由配置

//使用 query 传参  这里不需要参入参数，参见上面的params写法
{
   path: '/user',    
   name: "users",
   component: User    //这个 users 是传进来的组件名称
 }

2.2 跳转方式：

// 方法1：
<router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
// 方法2：
this.$router.push({ name: 'users', query:{ uname:james }})
// 方法3：
<router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
// 方法4：
this.$router.push({ path: '/user', query:{ uname:james }})
// 方法5：
this.$router.push('/user?uname=' + jsmes)

2.3 页面url显示：query在浏览器地址栏中显示参数名称