Vue3之路由的query參數(shù)和params參數(shù)用法

更新時間：2024年03月18日 17:23:53 作者：小饅頭學(xué)python

這篇文章主要介紹了Vue3之路由的query參數(shù)和params參數(shù)用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

路由中的參數(shù)

在 Vue 中，路由參數(shù)是指在訪問不同頁面時傳遞的信息。

它們可以用來動態(tài)地構(gòu)建頁面內(nèi)容，實現(xiàn)頁面間的數(shù)據(jù)傳遞和狀態(tài)管理。

Vue 的路由系統(tǒng)提供了多種方式來處理路由參數(shù)，包括動態(tài)路由、查詢參數(shù)和路由元信息等

query參數(shù)

我們接著使用上節(jié)用到的相關(guān)代碼，在路徑匹配后面我們加了一個問號，在問號后面我們加了一個參數(shù)

<template>
  <div class="plays">
    <!--導(dǎo)航區(qū)-->
    <ul>
      <li v-for="play in newList" :key="play.id">
        <RouterLink to="/plays/detail?a=1">{{play.title}}</RouterLink>
    </li>
    </ul>
    <!--展示區(qū)-->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

在地址欄我們可以清楚的看到，但是這也僅僅是淺淺看一看

接下來我們打開Detail.vue文件，我們導(dǎo)入一個useRoute

通過useRoute可以方便地訪問當(dāng)前路由的路徑、參數(shù)、查詢參數(shù)等信息，而不需要依賴于this.$route。

接下來我們應(yīng)該實例化一下函數(shù)，之后我們就可以在上面的模版中盡顯表達(dá)了

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

但是現(xiàn)在其實我們并不能匹配到id、title、content，可以匹配到的或許僅僅是a，然后顯示出1，接下來我們要解決這個問題

<template>
  <div class="plays">
    <!--導(dǎo)航區(qū)-->
    <ul>
      <li v-for="play in newList" :key="play.id">
        <RouterLink :to="`/plays/detail?id=${play.id}`">{{play.title}}</RouterLink>
    </li>
    </ul>
    <!--展示區(qū)-->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

這樣我們就可以點擊哪個出現(xiàn)哪個對應(yīng)的編號了

請?zhí)砑訄D片描述

修改后的如下

<RouterLink :to="`/plays/detail?id=${play.id}&title=${play.title}&content=${play.content}`">{{play.title}}</RouterLink>

上面的是第一種寫法

下面是第二種寫法

 <RouterLink 
          :to="{
            name:'detail',
            query:{
              id:play.id,
              title:play.title,
              content:play.content
            }
          }"
        >
          {{play.title}}
        </RouterLink>

params參數(shù)

還是需要useRoute的導(dǎo)入，接下來我們需要修改一下index.ts中的path

后面的問號表示可有可無

path:'Detail/:id/:title/:content?',

模版這里也要修改一下

<template>
    <ul class="news-list">
      <li>編號:{{ route.params.id }}</li>
      <li>標(biāo)題:{{ route.params.title }}</li>
      <li>內(nèi)容:{{ route.params.content }}</li>
    </ul>
  </template>

同樣也有兩種寫法

  </RouterLink> -->
          <!-- <RouterLink :to="`/news/detail/${play.id}/${play.title}/${play.content}`">{{play.title}}</RouterLink> -->
          <RouterLink 
          :to="{
            name:'Detail',
            params:{
              id:play.id,
              title:play.title,
              content:play.content
            }
          }"
        >
          {{play.title}}
        </RouterLink>

綜上所述：

1：傳遞params參數(shù)時，若使用to的對象寫法，必須使用name配置項，不能用path。

2：傳遞params參數(shù)時，需要提前在規(guī)則中占位。