在 Vue 應用程式中使用 `vue-router` 時,你可能會遇到以下警告訊息:
[Vue Router warn]: Discarded invalid param(s) "id" when navigating. See https://next.router.vuejs.org/guide/advanced/query.html#dynamic-segments for more details.
這個警告表示你在路由轉換過程中嘗試傳遞了一個無效的參數 (`id`),而 `vue-router` 已經自動丟棄了它。這可能是因為你在路徑或查詢字符串中使用了不正確的路由動態片段定義方式。
根據官方文件中的建議(https://next.router.vuejs.org/guide/advanced/query.html#dynamic-segments),當我們需要在路徑中包含動態參數時,必須以冒號 (:) 來標識這些片段為可變的部分。例如,如果你有一條像這樣的路由:
const routes = [
{ path: '/posts/:postId', component: Post } // 這裡的 postId 是 dynamic segment
]
那麼在導航到這個路徑時,你就需要提供一個有效的 `postId` 值,否則 `vue-router` 就會發出上述警告並忽略該參數。
此外,如果參數是在查詢字符串中而不是在路徑本身內部,那麼參數名稱應該放在單引號或者雙引號中,並且後面跟隨著等號 (=) 和其對應的值。例如:
// 有效的方式
/posts?postId=12345
// 無效的方式,會導致警告
/posts?postId12345
總結來說,要解決這個問題,請檢查你的路由配置和使用這些路由的方式,確保所有需要的參數都是按照 `vue-router` 的規範進行設置和使用的。如果發現任何錯誤或不一致的地方,修正它們即可消除這個警告訊息。