vue中query和param的區別

Vue.js 中query 和param 的差異在於：query 存取URL 查詢字串中的資料（如?key=value），而param 存取URL 段中的資料（如path/to/resource/ :key/value）。 query 可動態更新，而 param 在路由導航時重新載入。

Vue.js 中Query 和Param 的差異

在Vue.js 路由系統中， query 和param 是兩種不同的方式來存取URL 中傳遞的資料。

query

• 存取透過 URL 查詢字串傳遞的數據，格式為 ?key=value。
• 透過 this.$route.query 存取。
• 經常用來傳遞過濾、排序和分頁等非關鍵訊息。
• 可以動態更新，而無需重新載入頁面。

param

• 存取透過URL 段傳遞的數據，格式為path/to/resource/:key/value。
• 透過 this.$route.params 存取。
• 通常用於傳遞標識資源或路徑的部分的關鍵資訊。
• 在路由導航時會重新載入。

範例

// 路由定义
const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: User
    }
  ]
});

// 组件内访问数据
const User = {
  mounted() {
    console.log(this.$route.params.id); // 访问 URL 段中的 "id"
    console.log(this.$route.query.filter); // 访问查询字符串中的 "filter"
  }
};

總結

• query 用於存取查詢字串中的數據，param 用於存取URL 段中的資料。
• query 可動態更新，param 在路由導航時重新載入。
• 根據資料類型和用例選擇合適的存取方式。

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