在 vue 中，params 和 query 用于訪問動態路由片段和查詢字符串參數。params 對象包含動態路由片段的值，而 query 對象包含查詢字符串中的參數和值對。params 是路由的一部分，而 query 不是，這影響了路由匹配。你可以通過 $route 對象訪問 params 和 query，并在導航時使用它們傳遞數據。
Vue 中 params 和 query 的用法
在 Vue 路由中，params 和 query 是兩個密切相關的概念：
params
params 對象包含當前路由的動態片段的值。動態片段是在路由的路徑中使用 : 前綴的命名片段，如 /user/:id。
<code class="js">const User = {
template: '<p>User ID: {{ $route.params.id }}</p>'
}</code>
登錄后復制
當路由匹配 /user/123 時，$route.params 將包含以下對象：
<code class="js">{ id: '123' }</code>
登錄后復制
query
query 對象包含當前路由查詢字符串中的參數。查詢字符串是 URL 中 ? 號后面的參數和值對，如 ?page=2&sort=desc。
<code class="js">const SearchResults = {
template: '<p>Page: {{ $route.query.page }}</p>'
}</code>
登錄后復制
當路由匹配 /search?page=2&sort=desc 時，$route.query 將包含以下對象：
<code class="js">{ page: '2', sort: 'desc' }</code>
登錄后復制
區分 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 對象。
<code class="js">// 使用 params 導航
this.$router.push({ name: 'user', params: { id: '123' } })
// 使用 query 導航
this.$router.push({ name: 'search', query: { page: 2, sort: 'desc' } })</code>
登錄后復制
總結
params 和 query 是 Vue 路由中的重要概念，用于訪問動態路由片段和查詢字符串參數。理解這兩者之間的區別對于有效地使用 Vue 路由至關重要。
