Vue3中的路由傳參兩種方式舉例詳解

更新時間：2025年05月21日 09:19:44 作者：小二愛編程·

這篇文章主要給大家介紹了關于Vue3中的路由傳參兩種方式的相關資料,Vue Router支持query和params傳參,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在Vue應用中，路由傳參是非常常見的需求，它允許我們在不同的組件之間傳遞數(shù)據(jù)。Vue Router提供了兩種主要的方式來傳遞參數(shù)：query參數(shù)和params參數(shù)。下面我們將詳細探討這兩種傳參方式的使用方法和注意事項。

一、query參數(shù)

Query參數(shù)，顧名思義，是附加在URL后面的查詢字符串，以?開頭，后面跟著一系列的key=value對，多個鍵值對之間用&分隔。

1. 傳遞參數(shù)

在主路由中定義跳轉的子路由，使用<router-link>組件可以方便地實現(xiàn)query參數(shù)的傳遞。有兩種方式來指定to屬性：字符串寫法和對象寫法。

字符串寫法：直接在to屬性中寫入路徑和查詢字符串。

<template>
  <div class="news">
    <!-- 導航區(qū) -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一種寫法
        路徑拼接字符串
        -->
       <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</RouterLink> -->
      </li>
    </ul>
    <!-- 展示區(qū)
     點擊 路由跳轉 內(nèi)容展示到 路由展示區(qū)
    -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
  import {reactive} from 'vue'
  import {RouterView,RouterLink} from 'vue-router'

  const newsList = reactive([
    {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西藍花'},
    {id:'asfdtrfay02',title:'如何一夜暴富',content:'學IT'},
    {id:'asfdtrfay03',title:'震驚，萬萬沒想到',content:'明天是周一'},
    {id:'asfdtrfay04',title:'好消息！好消息！',content:'快過年了'}
  ])

</script>

<style scoped>
/* 新聞 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}
.news li::marker {
  color: #64967E;
}
.news li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>

對象寫法：通過一個對象來指定路徑和查詢參數(shù)。對象的path屬性指定路徑，query屬性則是一個包含所有查詢參數(shù)的對象。

<template>
  <div class="news">
    <!-- 導航區(qū) -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
       <!-- 第二種寫法
         指定路由名稱
         參數(shù)query列表
         -->
        <RouterLink 
          :to="{
            name:'xiang',
            query:{
              id:news.id,
              title:news.title,
              content:news.content
            }
          }"
        >
          {{news.title}}
        </RouterLink>

      </li>
    </ul>
    <!-- 展示區(qū)
     點擊 路由跳轉 內(nèi)容展示到 路由展示區(qū)
    -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
  import {reactive} from 'vue'
  import {RouterView,RouterLink} from 'vue-router'

  const newsList = reactive([
    {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西藍花'},
    {id:'asfdtrfay02',title:'如何一夜暴富',content:'學IT'},
    {id:'asfdtrfay03',title:'震驚，萬萬沒想到',content:'明天是周一'},
    {id:'asfdtrfay04',title:'好消息！好消息！',content:'快過年了'}
  ])

</script>

<style scoped>
/* 新聞 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}
.news li::marker {
  color: #64967E;
}
.news li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>

2. 接收參數(shù)

在目標組件中，也就是上述定義的'xiang'路由組件，我們可以使用useRoute來獲取傳遞過來的query參數(shù)。useRoute返回一個響應式的路由對象，其中的query屬性包含了所有的查詢參數(shù)。

<template>
  <ul class="news-list">
    <li>編號：{{ query.id }}</li>
    <li>標題：{{ query.title }}</li>
    <li>內(nèi)容：{{ query.content }}</li>
  </ul>
</template>

<script setup lang="ts" name="Detail">
  import {toRefs} from 'vue'
  import {useRoute} from 'vue-router'
  // 接收跳轉請求的query參數(shù)
  let route = useRoute()
  console.log(route.query)
  let {query} = toRefs(route)


</script>

運行結果如下，在控制臺可以接收到路由請求參數(shù)。

二、params參數(shù)

Params參數(shù)是通過URL的路徑部分來傳遞參數(shù)的，通常用于傳遞動態(tài)路由參數(shù)。

1. 傳遞參數(shù)

同樣地，我們使用<router-link>組件來傳遞params參數(shù)。但需要注意的是，如果使用對象寫法來指定to屬性，我們必須使用路由的name配置項，而不能直接使用path。

字符串寫法：直接在to屬性中寫入包含參數(shù)的路徑。

<RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{news.title}}</RouterLink>

對象寫法：通過一個對象來指定路由名稱和參數(shù)。對象的name屬性指定路由名稱，params屬性則是一個包含所有路徑參數(shù)的對象。

<RouterLink 
  :to="{
    name:'xiang', // 使用name配置項
    params:{
      id:news.id,
      title:news.title,
      content:news.content
    }
  }"
>
  {{news.title}}
</RouterLink>

2. 接收參數(shù)

在目標組件中，我們同樣可以使用useRoute來獲取傳遞過來的params參數(shù)。但這次我們需要訪問的是route.params屬性。

<template>
  <ul class="news-list">
    <!--獲取路由param的參數(shù)-->
    <li>編號：{{ route.params.id }}</li>
    <li>標題：{{ route.params.title }}</li>
    <li>內(nèi)容：{{ route.params.content }}</li>
  </ul>
</template>

<script setup lang="ts" name="Detail">
  import {toRefs} from 'vue'
  import {useRoute} from 'vue-router'
  // 接收跳轉請求的param參數(shù)
  let route = useRoute()
  console.log(route)

</script>

需要注意的是，使用param獲取路由參數(shù)，需要在路由定義的ts文件中，定義好參數(shù)，如：

    {
      name:'xinwen',
      path:'/news',
      component:News,
      // 嵌套子路由
      children:[
        {
          name:'xiang',
          path:'detail/:id/:title/:content?',
          component:Detail
        }
      ]
    }

三、總結

當使用params參數(shù)時，如果采用對象寫法來指定to屬性，必須使用路由的name配置項，而不能直接使用path。這是因為params參數(shù)需要通過路由的名稱來進行匹配，而不是簡單地拼接路徑。
在傳遞params參數(shù)之前，需要在路由規(guī)則中為對應的參數(shù)占位。例如，如果我們要傳遞一個名為id的參數(shù)，那么路由規(guī)則應該包含一個:id的動態(tài)段。
Query參數(shù)和params參數(shù)各有優(yōu)缺點。Query參數(shù)簡單易用，不需要對路由規(guī)則做特殊處理；但缺點是它們會出現(xiàn)在URL中，可能會影響用戶體驗和SEO。Params參數(shù)更加靈活和安全，不會出現(xiàn)在URL中（除非你顯式地想要它們出現(xiàn)）；但缺點是需要對路由規(guī)則進行特殊配置。

到此這篇關于Vue3中的路由傳參兩種方式的文章就介紹到這了,更多相關Vue3路由傳參詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: