vue-router 路由传参

时间：2025-03-25 09:49:19

vue-router传递参数分为两大类：

编程式的导航 
声明式的导航 <router-link>
  • 1
  • 2

声明式的导航 路由导航

字符串

<router-link to="/detail">详情</router-link>
  • 1

此方式实现路由跳转，不携带参数。

对象

传递参数主要是以对象的形式，有 命名路由 和 查询参数。
对应路由配置如下：

{
  path: '/detail',
  name: 'Detail',
  component: () => import('./')
}
  • 1
  • 2
  • 3
  • 4
  • 5

命名路由

<router-link :to="{ name: 'Detail', params: { id: 1111}}">click to detail page</router-link>
  • 1

此方法页面刷新路由传递参数会消失。

查询参数

<router-link :to="{ path: '/detail', query: { id: 1111}}">click to detail page</router-link>
  • 1

此方法页面刷新路由传递参数不会消失，传递参数会跟在路由地址后面。

编程式的导航 router.push

编程式导航传递参数有两种类型：字符串、对象。

字符串

字符串方式是直接将路由地址以字符串的方式来跳转，这种方式不能传递覅参数。

例子：

this.$router.push("detail");
  • 1

对象

传递参数主要是以对象的形式，有 命名路由 和 查询参数。

命名路由

命名路由传递参数使用params来传递。

实例：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({
      name: 'Detail',
      params: {
        id: id
  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

对应路由配置: 这里可以添加:/id 也可以不添加，添加/:id数据会在url后面显示，不添加数据就不会显示。

   {
     path: '/detail',
     // 一定要写name,params必须用name来识别路径
     name: 'Detail',
     component: () => import('./')
   }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

子组件中: 这样来获取参数

this.$route.params.id
  • 1

用params传参，F5强制刷新页面参数数据会被清空。

查询参数 $实现路由传参

查询参数是在路由地址后面带上参数，传递参数使用query，路由地址使用path来传递，目标页面接收传递的参数使用query。

实例：

父组件：使用 path 来匹配路由，然后子组件通过query来传递参数
这种情况下 query 传递的参数会显示在 url 后面 ?id=？。

例如：/#/detail?id=73080

this.$router.push({
      path: '/detail',
      query: {
        id: id
      }
    })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

对应路由配置：

{
  path: '/detail',
  name: 'Detail',
  component: () => import('./')
}
  • 1
  • 2
  • 3
  • 4
  • 5

对应子组件获取参数：

// 获取参数
this.$route.query.id
  • 1
  • 2

使用这种方式实现，刷新页面传递的参数不会消失。

也可以是以下这种，直接调用$ 实现携带参数的跳转：

//直接调用$ 实现携带参数的跳转
this.$router.push({
    path: `/detail/${id}`,
})
  • 1
  • 2
  • 3
  • 4

对应路由配置如下：

{
  path: '/detail/:id',
  name: 'Detail',
  component: () => import('./')
}
  • 1
  • 2
  • 3
  • 4
  • 5

这种方式，需要在path中添加/:id来对应 $ 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id
  • 1

此方法页面刷新数据不会丢失。

当然，个人感觉这种方式会比较麻烦，需要在跳转地方确定传递参数，还要去对应路由配置那里写一下传递参数。

总结

总的来说，万变不离其宗，vue-router 路由传参归为以下三大类：
一、用uter-link>标签来传递参数
二、用$实现路由传参，通过query来传递参数
三、通过路由属性中的name匹配路由，再根据params传递参数

tip: 用params传参，F5强制刷新参数会被清空，用query，由于参数适用路径传参的所以F5强制刷新也不会被清空。（为了避坑，传参强烈建议使用string类型）

相关文章