在Vue Router中,可以通過$route對象來獲取路由信息,包括路由地址、參數、查詢參數等。而獲取當前路由地址的來源信息,主要有兩種方式,分別是使用$route對象獲取from參數和使用導航守衛獲取from信息。
要使用$route對象獲取from參數,需要在組件中引入$route對象,并通過$route對象的from屬性獲取from參數。from參數表示當前路由跳轉的來源路由地址。
import { mapState } from 'vuex' export default { computed: { ...mapState(['currentUser']), from() { return this.$route.from } } }
上述代碼中,使用mapState函數將currentUser數據映射到組件中,并通過this.$route.from獲取from參數,并將它賦值給組件的from屬性。
另一種獲取from信息的方式是使用導航守衛。導航守衛是Vue Router提供的一種功能,用于在路由切換前、后或取消時執行某些操作,包括更新路由信息、鑒權、處理加載等。在導航守衛的參數中,包括當前路由對象to和from,分別表示將要跳轉的路由和來源路由。
export default { mounted() { this.$router.beforeEach((to, from, next) =>{ if (/*your condition*/) { next() } else { next(from.path) } }) } }
上述代碼中,通過this.$router.beforeEach方法注冊了全局前置守衛,并在它的參數中獲取了to和from參數,并通過next參數控制是否進行路由切換,如果攔截路由切換,則調用next函數并傳入from.path作為參數,表示跳轉回來源路由,并中止原先的路由切換。
總的來說,通過$route對象獲取from參數比較簡單,適用于在組件內部獲取路由來源信息。而使用導航守衛獲取from信息則更加靈活,可供在路由跳轉前面添加特定操作的場景下使用。
下一篇vue 支持兼容ie