一、引言

在Vue應用程序中，路由組件是構建單頁應用的關鍵部分。傳遞參數(shù)給路由組件可以讓我們動態(tài)地展示內容，處理用戶輸入，以及實現(xiàn)各種交互功能。

二、路由參數(shù)

路由參數(shù)(Route Params)：可以通過在路由路徑中定義動態(tài)參數(shù)來傳遞數(shù)據(jù)。在路由配置中使用:來定義參數(shù)，然后在組件中通過this.$route.params來獲取參數(shù)的值。

// 路由配置
{
  path: '/user/:id',
  component: UserComponent
}
// 組件中獲取參數(shù)
this.$route.params.id

三、查詢參數(shù)

查詢參數(shù)(Query Params)：可以通過在URL中使用查詢字符串的方式來傳遞參數(shù)。在組件中可以通過this.$route.query來獲取查詢參數(shù)的值。

// 路由配置
{
  path: '/user',
  component: UserComponent
}
// URL：/user?id=123
// 組件中獲取參數(shù)
this.$route.query.id

params和query傳參的區(qū)別

• query在刷新頁面的時候參數(shù)不會消失，params刷新頁面的時候參數(shù)會消失。
• 使用name+query或者path+query傳遞路徑參數(shù)，使用name+params傳遞路徑參數(shù)。
• query參數(shù)顯示在url地址欄當中，參數(shù)以鍵值對的形式追加在URL后，用?和&拼接參數(shù)，而params傳參不會顯示在地址欄。
• query傳參適合傳遞可選的參數(shù)，常用于根據(jù)用戶的選擇或配置進行篩選、排序等操作。params傳參適合傳遞必要的、對應特定資源的參數(shù)，常用于標識性的參數(shù)傳遞。

四、路由元信息

路由元信息(Route Meta)：可以在路由配置中定義元信息來傳遞參數(shù)。在路由配置中使用meta字段來定義元信息，然后在組件中通過this.$route.meta來獲取元信息的值。

// 路由配置
{
  path: '/user',
  component: UserComponent,
  meta: {
    isAdmin: true
  }
}
// 組件中獲取元信息
this.$route.meta.isAdmin

五、Props傳參

Props傳參：可以通過在路由配置中使用props字段來傳遞參數(shù)。可以將props設置為true，這樣路由組件會自動將路由參數(shù)映射為組件的屬性。也可以將props設置為一個函數(shù)，來自定義參數(shù)的映射方式。

// 路由配置
const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true
    //props: { id: '123' }
    //props: (route) => ({ id: route.params.id })
  }
]
// 路由組件
const User = {
  props: ['id'],
  template: '<div>User ID: {{ id }}</div>'
}

六、編程式導航傳參

可以使用router.push或router.replace方法進行編程式導航，并通過params或query字段傳遞參數(shù)。

router.push方法用于導航到一個新的路由，并將其添加到瀏覽器的歷史記錄中?？梢酝ㄟ^第二個參數(shù)傳遞參數(shù)。

// 路由參數(shù)
router.push({path: '/user/123'})
// 獲取參數(shù)
console.log(this.$route.params.id);
// 查詢參數(shù)
router.push({path: '/user', query: { id: 123 } })
// 獲取參數(shù)
console.log(this.$route.query.id);

當使用router.push方法進行路由跳轉時，如果傳遞的路徑中包含動態(tài)參數(shù)（例如/user/:id），則參數(shù)會被解析為路由的params屬性。

router.replace方法也用于導航到一個新的路由，但是不會將新的路由添加到瀏覽器的歷史記錄中，而是替換當前的路由。同樣可以通過第二個參數(shù)傳遞參數(shù)。

router.replace({ path: '/user/123', params: { id: 123 } });
// 獲取參數(shù)
this.$route.params.id

在上述示例中，使用path屬性指定了目標路徑為/user/123，并使用params屬性傳遞了參數(shù)，其中id參數(shù)的值為123。

七、聲明式導航傳參

在Vue Router中，可以使用router-link組件進行聲明式導航，并通過to屬性傳遞參數(shù)。例如，要傳遞參數(shù)到目標路徑/user/123，可以使用以下方式。

<router-link :to="{ path: '/user/' + id }">User</router-link>
<router-link :to="{path:'/user', query:{id:123}}">User</router-link>

第一個router-link組件的to屬性使用了動態(tài)的路徑參數(shù)，這意味著在渲染時，id是一個變量，它的值將會動態(tài)地替換到路徑中。例如，如果id的值是123，那么生成的鏈接將是/user/123。這種方式使用了params參數(shù)來傳遞參數(shù)給目標路由組件。

第二個router-link組件的to屬性使用了查詢參數(shù)，這意味著在生成的鏈接中，會在URL后面添加查詢字符串，例如/user?id=123。這種方式使用了query參數(shù)來傳遞參數(shù)給目標路由組件。

export default {
  created() {
    // 獲取傳遞的參數(shù)
    const userId = this.$route.params.id;
    console.log(userId); // 123
    // const userId = this.$route.query.id;
    // console.log(userId); // 123
  }
};

我們用this.$route.params.id和this.$route.params.id獲取到傳遞的參數(shù)id的值，即123。

八、最后的話

能力一般，水平有限，本文可能存在紕漏或錯誤，如有問題歡迎指正，感謝你閱讀這篇文章，如果你覺得寫得還行的話，不要忘記點贊、評論、收藏哦！祝生活愉快！

以上就是Vue路由組件傳遞參數(shù)的六種場景的詳細內容，更多關于Vue路由組件傳遞參數(shù)的資料請關注腳本之家其它相關文章！

最新評論