前言
在Vue應用中，路由傳參是非常常見的需求，它允許我們在不同的組件之間傳遞數據。Vue Router提供了兩種主要的方式來傳遞參數：query參數和params參數。下面我們將詳細探討這兩種傳參方式的使用方法和注意事項。
一、query參數
Query參數，顧名思義，是附加在URL后面的查詢字符串，以?開頭，后面跟著一系列的key=value對，多個鍵值對之間用&分隔。
1. 傳遞參數
在主路由中定義跳轉的子路由，使用<router-link>組件可以方便地實現query參數的傳遞。有兩種方式來指定to屬性：字符串寫法和對象寫法。
- 字符串寫法：直接在to屬性中寫入路徑和查詢字符串。
<template><div class="news"><!-- 導航區 --><ul><li v-for="news in newsList" :key="news.id"><!-- 第一種寫法路徑拼接字符串--><RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</RouterLink> --></li></ul><!-- 展示區點擊 路由跳轉 內容展示到 路由展示區--><div class="news-content"><RouterView></RouterView></div></div>
</template><script setup lang="ts" name="News">import {reactive} from 'vue'import {RouterView,RouterLink} from 'vue-router'const newsList = reactive([{id:'asfdtrfay01',title:'很好的抗癌食物',content:'西藍花'},{id:'asfdtrfay02',title:'如何一夜暴富',content:'學IT'},{id:'asfdtrfay03',title:'震驚，萬萬沒想到',content:'明天是周一'},{id:'asfdtrfay04',title:'好消息！好消息！',content:'快過年了'}])</script><style scoped>
/* 新聞 */
.news {padding: 0 20px;display: flex;justify-content: space-between;height: 100%;
}
.news ul {margin-top: 30px;/* list-style: none; */padding-left: 10px;
}
.news li::marker {color: #64967E;
}
.news li>a {font-size: 18px;line-height: 40px;text-decoration: none;color: #64967E;text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {width: 70%;height: 90%;border: 1px solid;margin-top: 20px;border-radius: 10px;
}
</style> - 對象寫法：通過一個對象來指定路徑和查詢參數。對象的path屬性指定路徑，query屬性則是一個包含所有查詢參數的對象。
<template><div class="news"><!-- 導航區 --><ul><li v-for="news in newsList" :key="news.id"><!-- 第二種寫法指定路由名稱參數query列表--><RouterLink :to="{name:'xiang',query:{id:news.id,title:news.title,content:news.content}}">{{news.title}}</RouterLink></li></ul><!-- 展示區點擊 路由跳轉 內容展示到 路由展示區--><div class="news-content"><RouterView></RouterView></div></div>
</template><script setup lang="ts" name="News">import {reactive} from 'vue'import {RouterView,RouterLink} from 'vue-router'const newsList = reactive([{id:'asfdtrfay01',title:'很好的抗癌食物',content:'西藍花'},{id:'asfdtrfay02',title:'如何一夜暴富',content:'學IT'},{id:'asfdtrfay03',title:'震驚，萬萬沒想到',content:'明天是周一'},{id:'asfdtrfay04',title:'好消息！好消息！',content:'快過年了'}])</script><style scoped>
/* 新聞 */
.news {padding: 0 20px;display: flex;justify-content: space-between;height: 100%;
}
.news ul {margin-top: 30px;/* list-style: none; */padding-left: 10px;
}
.news li::marker {color: #64967E;
}
.news li>a {font-size: 18px;line-height: 40px;text-decoration: none;color: #64967E;text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {width: 70%;height: 90%;border: 1px solid;margin-top: 20px;border-radius: 10px;
}
</style>2. 接收參數
在目標組件中，也就是上述定義的'xiang'路由組件，我們可以使用useRoute來獲取傳遞過來的query參數。useRoute返回一個響應式的路由對象，其中的query屬性包含了所有的查詢參數。
<template><ul class="news-list"><li>編號：{{ query.id }}</li><li>標題：{{ query.title }}</li><li>內容：{{ query.content }}</li></ul>
</template><script setup lang="ts" name="Detail">import {toRefs} from 'vue'import {useRoute} from 'vue-router'// 接收跳轉請求的query參數let route = useRoute()console.log(route.query)let {query} = toRefs(route)</script>運行結果如下，在控制臺可以接收到路由請求參數。
二、params參數
Params參數是通過URL的路徑部分來傳遞參數的，通常用于傳遞動態路由參數。
1. 傳遞參數
同樣地，我們使用<router-link>組件來傳遞params參數。但需要注意的是，如果使用對象寫法來指定to屬性，我們必須使用路由的name配置項，而不能直接使用path。
- 字符串寫法：直接在to屬性中寫入包含參數的路徑。
<RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{news.title}}</RouterLink>- 對象寫法：通過一個對象來指定路由名稱和參數。對象的name屬性指定路由名稱，params屬性則是一個包含所有路徑參數的對象。
<RouterLink :to="{name:'xiang', // 使用name配置項params:{id:news.id,title:news.title,content:news.content}}"
>{{news.title}}
</RouterLink>2. 接收參數
在目標組件中，我們同樣可以使用useRoute來獲取傳遞過來的params參數。但這次我們需要訪問的是route.params屬性。
<template><ul class="news-list"><!--獲取路由param的參數--><li>編號：{{ route.params.id }}</li><li>標題：{{ route.params.title }}</li><li>內容：{{ route.params.content }}</li></ul>
</template><script setup lang="ts" name="Detail">import {toRefs} from 'vue'import {useRoute} from 'vue-router'// 接收跳轉請求的param參數let route = useRoute()console.log(route)</script>需要注意的是，使用param獲取路由參數，需要在路由定義的ts文件中，定義好參數，如：
{name:'xinwen',path:'/news',component:News,// 嵌套子路由children:[{name:'xiang',path:'detail/:id/:title/:content?',component:Detail}]}三、總結
- 當使用params參數時，如果采用對象寫法來指定to屬性，必須使用路由的name配置項，而不能直接使用path。這是因為params參數需要通過路由的名稱來進行匹配，而不是簡單地拼接路徑。
- 在傳遞params參數之前，需要在路由規則中為對應的參數占位。例如，如果我們要傳遞一個名為
id的參數，那么路由規則應該包含一個:id的動態段。 - Query參數和params參數各有優缺點。Query參數簡單易用，不需要對路由規則做特殊處理；但缺點是它們會出現在URL中，可能會影響用戶體驗和SEO。Params參數更加靈活和安全，不會出現在URL中（除非你顯式地想要它們出現）；但缺點是需要對路由規則進行特殊配置。
