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