Vue2路由传参详解

NFVE • 2024-10-04 00:12 • 编程

一、Vue路由传参

Vue Router是Vue.js官方提供的路由管理器，它能够非常方便地实现路由的切换，同时也支持路由参数传递。Vue Router支持通过URL传递参数和通过组件属性传递参数两种方式。

二、Vue路由传参的方式

Vue路由传参主要有三种方式，分别是：params传参，query传参，props传参。

三、Vue路由传参的几种方式

1. params传参

通过params传参方式，可以直接在路由地址后面添加参数，这些参数将被作为$route.params对象的属性存在，参数传递的方式是通过冒号（:）替换为params属性，具体代码如下：

// 路由配置
{
  path: '/page/:id',
  component: Page
}
// 页面跳转
this.$router.push('/page/123')
// 页面接收参数
this.$route.params.id // 123

2. query传参

通过query传参方式，可以直接在路由地址后面添加参数，这些参数将被作为$route.query对象的属性存在，参数传递的方式是通过问号（?）加上参数名和参数值，多个参数以&分隔，具体代码如下：

// 路由配置
{
  path: '/page',
  component: Page
}
// 页面跳转
this.$router.push('/page?id=123&name=test')
// 页面接收参数
this.$route.query.id // 123
this.$route.query.name // test

3. props传参

通过props传参方式，可以在路由组件中直接使用props属性接收参数，具体代码如下：

// 路由配置
{
  path: '/page',
  component: Page,
  // 将路由参数映射到组件的props中
  props: route => ({ id: route.query.id })
}
// 页面跳转
this.$router.push('/page?id=123')
// 页面接收参数
props: ['id']

四、Vue3路由传参

Vue3与Vue2在路由传参方面没有太大区别，仍然支持params传参、query传参和props传参三种方式，具体使用方式也相同。

五、Vue路由传参数的类型

在Vue路由传参时，可以传递任意类型的参数，包括基本类型（Number、String、Boolean等）以及引用类型（Object、Array等），具体代码如下：

// 路由配置
{
  path: '/page/:id',
  component: Page
}
// 页面跳转
this.$router.push({ path: '/page/123', query: { name: 'test' }, params: { obj: { key: 'value' } }})
// 页面接收参数
props: ['id'],
created() {
  console.log(this.$route.params.id) // 123
  console.log(this.$route.query.name) // test
  console.log(this.$route.params.obj.key) // value
}

六、Vue路由传值

Vue路由传值的本质是通过路由参数传递数据，为了方便起见，我们可以将目标组件中需要使用的路由参数通过props方式提前声明，然后在父组件中通过$route对象进行传递，具体代码如下：

原创文章，作者：NFVE，如若转载，请注明出处：https://www.506064.com/n/135342.html