Vue2路由傳參詳解

一、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對象進行傳遞，具體代碼如下：


 {{ id }}
原創文章，作者：NFVE，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/135342.html