vue中params和query的用法

在 Vue 中，params 和 query 用於存取動態路由片段和查詢字串參數。 params 物件包含動態路由片段的值，而 query 物件包含查詢字串中的參數和值對。 params 是路由的一部分，而 query 不是，這影響了路由匹配。你可以透過 $route 物件存取 params 和 query，並在導航時使用它們傳遞資料。

Vue 中params 和query 的用法

在Vue 路由中，params 和query 是兩個密切相關的概念：

##params

##params

物件包含目前路由的動態片段的值。動態片段是在路由的路徑中使用 : 前綴的命名片段，如 /user/:id。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;js&quot;&gt;const User = { template: '&lt;p&gt;User ID: {{ $route.params.id }}&lt;/p&gt;' }&lt;/code&gt;</pre><div class="contentsignin">登入後複製</div></div>當路由匹配

/user/123

時，$route.params 將包含以下物件：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;js&quot;&gt;{ id: '123' }&lt;/code&gt;</pre><div class="contentsignin">登入後複製</div></div>

#query

query

物件包含目前路由查詢字串中的參數。查詢字串是 URL 中 ? 號碼後面的參數和值對，如 ?page=2&sort=desc。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;js&quot;&gt;const SearchResults = { template: '&lt;p&gt;Page: {{ $route.query.page }}&lt;/p&gt;' }&lt;/code&gt;</pre><div class="contentsignin">登入後複製</div></div>當路由匹配

/search?page=2&sort=desc

時，$route.query 將包含以下物件：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;js&quot;&gt;{ page: '2', sort: 'desc' }&lt;/code&gt;</pre><div class="contentsignin">登入後複製</div></div>

區分params 和query

params

和query 之間的一個關鍵區別是，params 是路由的一部分，而query 不是。這表示 params 會影響路由匹配，而 query 不會。例如，路由 /user/:id 只會符合具有有效 id 參數的 URL。但是，/search 路由將符合任何帶有或不帶有查詢字串的 URL。

使用params 和query

你可以透過

$route

物件存取params 和query#對象。對於導航，可以使用$router.push 或$router.replace 方法，這兩個方法都支援傳遞params 或query#對象。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;js&quot;&gt;// 使用 params 导航 this.$router.push({ name: 'user', params: { id: '123' } }) // 使用 query 导航 this.$router.push({ name: 'search', query: { page: 2, sort: 'desc' } })&lt;/code&gt;</pre><div class="contentsignin">登入後複製</div></div>

總結

params

和query 是Vue 路由中的重要概念，用於存取動態路由片段和查詢字串參數。理解這兩者之間的差異對於有效地使用 Vue 路由至關重要。

以上是vue中params和query的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！