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

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

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

路由中的參數(shù)

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

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

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

query參數(shù)

我們接著使用上節(jié)用到的相關(guān)代碼，在路徑匹配后面我們加了一個(gè)問(wèn)號(hào)，在問(wèn)號(hào)后面我們加了一個(gè)參數(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>

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

接下來(lái)我們打開(kāi)Detail.vue文件，我們導(dǎo)入一個(gè)useRoute

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

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

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

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

<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>

這樣我們就可以點(diǎn)擊哪個(gè)出現(xiàn)哪個(gè)對(duì)應(yīng)的編號(hào)了

請(qǐ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)入，接下來(lái)我們需要修改一下index.ts中的path

后面的問(wèn)號(hào)表示可有可無(wú)

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

模版這里也要修改一下

<template>
    <ul class="news-list">
      <li>編號(hào):{{ 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ù)時(shí)，若使用to的對(duì)象寫法，必須使用name配置項(xiàng)，不能用path。

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