Vue Router 是 Vue.js 官方的路由管理器,為單頁應用提供了路由系統。Vue Router 可以通過攜帶參數來實現頁面之間的跳轉。
當我們進行頁面之間的跳轉時,需要將一些參數傳遞給目標組件,這些參數可以是一些簡單的數據類型比如字符串、數字,也可以是復雜的對象。在 Vue Router 中,可以通過路由的 path 中添加參數,或者使用 query 或 params 來傳遞參數。
// 通過 path 傳遞參數
{
path: '/example/:id',
component: ExampleComponent
}
// 使用 query 傳遞參數
router.push({ path: '/example', query: { id: '123' } })
// 使用 params 傳遞參數
router.push({ name: 'example', params: { id: '123' }
在上述代碼中,我們可以看到路由的 path 中添加了 :id 參數,這個參數可以在目標組件中通過 $route.params.id 來獲取。另外,我們也可以使用 query 或 params 來傳遞參數,query 和 params 都是在路由對象中的屬性。
雖然我們可以在路由中攜帶參數,但是當我們在路由跳轉之后,這些參數并不會自動傳遞給目標組件,需要在目標組件中進行獲取,這可以通過我們在目標組件中使用 $route 對象來獲取。
export default {
name: 'ExampleComponent',
mounted() {
const id = this.$route.params.id // 獲取路由中的參數
const queryId = this.$route.query.id // 獲取路由中的 query 參數
}
}
在上述代碼中,我們可以看到,在 ExampleComponent 組件中,通過 this.$route.params.id 或者 this.$route.query.id 來獲取從路由中傳遞過來的參數。
當我們使用 query 或者 params 來傳遞參數時,需要注意一些問題。使用 query 傳遞參數時,參數會出現在 URL 中,如果參數較多的話,會導致 URL 過長,影響用戶體驗。而使用 params 傳遞參數時,需要在路由中添加參數,如果路由參數過多,則會顯得非常繁瑣。
另外,在使用 params 傳遞參數時,需要注意的是,如果當前組件是根據路由跳轉而來,則會觸發組件的銷毀和重新創建,會造成一定性能問題。如果需要避免這種問題,可以考慮使用 query 參數傳遞參數。
總之,在使用 Vue Router 進行路由跳轉時,我們可以通過攜帶參數來實現頁面之間的交互,需要根據具體的業務需求來選擇使用哪種方式進行參數傳遞。