Vue Router 是 Vue.js 的官方路由管理器,它和 Vue.js 核心深度集成,讓構建單頁應用變得十分容易。在 Vue Router 中,我們可以通過 Getters 獲取 route 對象的一些信息。
Getters 把獲取 route 對象的過程封裝起來,使其更加便捷和優雅。在 Vue Router 中,有兩種類型的 Getters:公共 Getters 和路由級別的 Getters。
公共 Getters 可以在任何組件內被訪問,而路由級別的 Getters 只能在當前活躍路由內被訪問。下面來看一些常用的 Getters。
// 全局公共 Getters this.$route.path // 當前路由路徑 this.$route.params // 當前路由參數 this.$route.query // 當前路由查詢參數 // 路由級別 Getters this.$route.name // 當前路由名字 this.$route.meta // 當前路由的元信息(路由配置中的 meta 字段) this.$route.path // 當前路由路徑 this.$route.params // 當前路由參數 this.$route.query // 當前路由查詢參數
如上所述,$route.path 表示當前路由路徑,$route.params 表示當前路由參數,$route.query 表示當前路由查詢參數。其中,路由參數和查詢參數的使用方法如下:
// 假設有如下路由配置 { path: '/user/:id', component: User, props: true, // 將路由參數映射為組件屬性 children: [ { path: 'profile', component: UserProfile, meta: { requiresAuth: true } } ] } // 用戶 ID 將被映射為組件屬性 // 地址類似:/user/123 this.$route.params.id // 查詢參數使用如下 // 地址類似:/user/123?foo=bar this.$route.query.foo
除此之外,$route.meta 是一個存儲在路由配置中的數據對象。它可以包含任何自定義的字段,例如需要對某些路由進行權限控制,我們可以為這些路由添加一個 requiresAuth 的字段,表示是否需要登錄才能訪問。通過 $route.meta.requiresAuth 字段,我們可以輕松地進行身份驗證。
Getters 是 Vue Router 的一個重要特性,使得我們可以方便地獲取當前路由的信息。上述示例已經介紹了一些常用的 Getters,希望能夠幫助大家更好地使用 Vue Router。