如何解決vuejs query傳參失敗的問題

# 如何解決Vue.js query傳參失敗的問題

## 問題場景
在Vue.js開發中，我們經常需要通過URL的query參數傳遞數據，但有時會遇到傳參失敗的情況。常見表現為：
1. 參數未出現在URL中
2. 頁面刷新后參數丟失
3. 接收不到傳遞的參數

## 常見原因分析

### 1. 路由配置問題
```javascript
// 錯誤示例：未聲明props接收query參數
const routes = [{ path: '/user', component: User }]

// 正確配置
const routes = [{ 
  path: '/user', 
  component: User,
  props: (route) => ({ query: route.query }) 
}]

2. 參數傳遞方式錯誤

// 錯誤寫法
this.$router.push('/user?id=123')

// 正確寫法
this.$router.push({
  path: '/user',
  query: { id: 123 }
})

解決方案

方案一：檢查路由跳轉方式

確保使用對象形式傳遞參數：

// 推薦方式
this.$router.push({
  name: 'user',  // 建議使用命名路由
  query: {
    page: 1,
    sort: 'desc'
  }
})

方案二：處理參數接收

在目標組件中正確接收參數：

export default {
  created() {
    // 方式1：通過this.$route.query
    console.log(this.$route.query.id)
    
    // 方式2：通過props接收
    props: ['query'],
    created() {
      console.log(this.query.id)
    }
  }
}

方案三：處理特殊字符

當參數包含特殊字符時：

// 編碼處理
const param = encodeURIComponent('特殊/字符')
this.$router.push({
  path: '/search',
  query: { q: param }
})

最佳實踐建議

1. 始終使用命名路由
2. 復雜參數建議先JSON.stringify
3. 在導航守衛中驗證參數
4. 使用vue-router的parseQuery/stringifyQuery處理復雜場景

總結

query傳參失敗通常是由于路由配置或參數傳遞方式不當導致的。通過規范的路由配置、正確的參數傳遞方式以及合理的參數處理，可以解決大多數傳參問題。 “`