快捷導(dǎo)航

詳解Vue 路由組件傳參的 8 種方式

更新時(shí)間：2021年03月12日 09:31:16 投稿：mrr

這篇文章主要介紹了Vue 路由組件傳參的 8 種方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

我們?cè)陂_(kāi)發(fā)單頁(yè)面應(yīng)用時(shí)，有時(shí)需要進(jìn)入某個(gè)路由后基于參數(shù)從服務(wù)器獲取數(shù)據(jù)，那么我們首先要獲取路由傳遞過(guò)來(lái)的參數(shù)，從而完成服務(wù)器請(qǐng)求，所以，我們需要了解路由傳參的幾種方式，以下方式同 vue-router@4 。

編程式路由傳參

除了使用 <router-link> 創(chuàng)建 a 標(biāo)簽來(lái)定義導(dǎo)航鏈接，我們還可以借助 router 的實(shí)例方法，通過(guò)編寫(xiě)代碼來(lái)實(shí)現(xiàn)。

1. 通過(guò) params 傳遞

路由配置

路徑參數(shù) 用冒號(hào) : 表示。

const routes = [
 // 動(dòng)態(tài)段以冒號(hào)開(kāi)始
 { path: 'details/:id', name: "details", component: Details },
]

router.push() 方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。

const Home = {
 template: '<div @click="toDetails">To Details</div>',
 metheds: {
  toDetails() {
   // 字符串路徑
   this.$router.push('/details/001')
   // 帶有路徑的對(duì)象
   this.$router.push({path: '/details/001'})
   // 命名路由，路由配置時(shí)，需要 name 字段
   this.$router.push({ name: 'details', params: { id: '001' } })
  }
 }
}

注意，如果提供了 path ， params 會(huì)被忽略：

// `params` 不能與 `path` 一起使用
router.push({ path: '/details', params: { id: '001' } }) // -> /details

組件獲取數(shù)據(jù)

當(dāng)一個(gè)路由被匹配時(shí)，它的 params 的值將在每個(gè)組件中以 this.$route.params 的形式暴露出來(lái)。

const Details = {
 template: '<div>Details {{ $route.params.id }} </div>',
 created() {
  // 監(jiān)聽(tīng)路由變化
  this.$watch(
   () => this.$route.params,
   (toParams, previousParams) => {
    // 對(duì)路由變化做出響應(yīng)...
   }
  )
 },
}

2. 通過(guò) query 傳遞

這種情況下 query （查詢參數(shù)）傳遞的參數(shù)會(huì)顯示在 url 后面，如： /details/001?kind=car 。

路由配置

使用 query 時(shí)，以下三種方式都是可行的：

this.$router.push('/details/001?kind=car')
this.$router.push({ path: '/details/001', query: { kind: "car" }})
this.$router.push({ name: 'details', params: { id: '001' }, query: { kind: 'car' }})

組件獲取數(shù)據(jù)

組件通過(guò) $route.query 獲?。?/p>

const Details = {
 template: '<div>Details {{ $route.query.kind }} </div>',
 created() {
  // 監(jiān)聽(tīng)路由變化
  this.$watch(
   () => this.$route.query,
   (toParams, previousParams) => {
    // 對(duì)路由變化做出響應(yīng)...
   }
  )
 },
}

要對(duì)同一個(gè)組件中參數(shù)的變化做出響應(yīng)的話，你可以簡(jiǎn)單地 watch $route 對(duì)象上的任意屬性，在這個(gè)場(chǎng)景中，就是 $route.query 。

3. 通過(guò) hash 傳遞

通過(guò)此方式，url 路徑中帶有 hash ，例如： /details/001#car 。

路由配置

使用 hash 時(shí)，以下三種方式都是可行的（同 query ）：

this.$router.push('/details/001#car')
this.$router.push({ path: '/details/001', hash: '#car'})
this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})

組件獲取數(shù)據(jù)

組件通過(guò) $route.hash.slice(1) 獲?。?/p>

const Details = {
 template: '<div>Details {{ $route.hash.slice(1) }} </div>',
}

通過(guò) props 進(jìn)行傳遞

在組件中使用 $route 會(huì)與路由緊密耦合，這限制了組件的靈活性，因?yàn)樗荒苡糜谔囟ǖ?URL。雖然這不一定是件壞事，但我們可以通過(guò) props 配置來(lái)解除這種行為。

以解耦的方式使用 props 進(jìn)行參數(shù)傳遞，主要是在路由配置中進(jìn)行操作。

1. 布爾模式

當(dāng) props 設(shè)置為 true 時(shí)， route.params 將被設(shè)置為組件的 props。

例如下面的代碼是通過(guò) $route 的方式獲取動(dòng)態(tài)字段 id ：

const User = {
 template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]

將上面的代碼替換成 props 的形式，如下：

const User = {
 props: ['id'], // 組件中通過(guò) props 獲取 id
 template: '<div>User {{ id }}</div>'
}
// 路由配置中，增加 props 字段，并將值 設(shè)置為 true
const routes = [{ path: '/user/:id', component: User, props: true }]

注意：對(duì)于有命名視圖的路由，你必須為每個(gè)命名視圖定義 props 配置：

const routes = [
 {
  path: '/user/:id',
  components: { default: User, sidebar: Sidebar },
  // 為 User 提供 props
  props: { default: true, sidebar: false }
 }
]

2. 對(duì)象模式

當(dāng) props 是一個(gè)對(duì)象時(shí)，它將原樣設(shè)置為組件 props。當(dāng) props 是靜態(tài)的時(shí)候很有用。

路由配置

const routes = [
 {
  path: '/hello',
  component: Hello,
  props: { name: 'World' }
 }
]

組件中獲取數(shù)據(jù)

const Hello = {
 props: {
  name: {
   type: String,
   default: 'Vue'
  }
 },
 template: '<div> Hello {{ name }}</div>'
}

<Hello /> 組件默認(rèn)顯示 Hello Vue，但路由配置了 props 對(duì)象，當(dāng)路由跳轉(zhuǎn)到 /hello 時(shí)，會(huì)顯示傳遞過(guò)來(lái)的 name ，頁(yè)面會(huì)顯示為 Hello World。

3. 函數(shù)模式

可以創(chuàng)建一個(gè)返回 props 的函數(shù)。這允許你將參數(shù)轉(zhuǎn)換為其他類型，將靜態(tài)值與基于路由的值相結(jié)合等等。

路由配置

使用函數(shù)模式時(shí)，返回 props 的函數(shù)接受的參數(shù)為路由記錄 route 。

// 創(chuàng)建一個(gè)返回 props 的函數(shù)
const dynamicPropsFn = (route) => {
 return { name: route.query.say + "!" }
}
const routes = [
 {
  path: '/hello',
  component: Hello,
  props: dynamicPropsFn
 }
]

組件獲取數(shù)據(jù)

當(dāng) URL 為 /hello?say=World 時(shí)，將傳遞 {name: 'World!'} 作為 props 傳給 Hello 組件。

const Hello = {
 props: {
  name: {
   type: String,
   default: 'Vue'
  }
 },
 template: '<div> Hello {{ name }}</div>'
}

此時(shí)頁(yè)面將渲染：

注意：請(qǐng)盡可能保持 props 函數(shù)為無(wú)狀態(tài)的，因?yàn)樗粫?huì)在路由發(fā)生變化時(shí)起作用。如果你需要狀態(tài)來(lái)定義 props，請(qǐng)使用包裝組件，這樣 vue 才可以對(duì)狀態(tài)變化做出反應(yīng)。