Vue Router是一個Vue.js官方的路由管理器。Vue Router可以用來管理Vue.js應用程序中的路由。Vue Router允許你在應用程序中使用路由和視圖之間的映射關系。
在Vue Router中,我們可以通過使用store將狀態注入路由組件中。這可以讓我們在路由組件中使用Vuex的狀態。這對于在組件中使用store中的狀態非常方便。在路由掛載前加載store,再將store注入到Vue Router配置中。
import store from './store' const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, store, // 將store注入到Vue Router }) router.beforeEach((to, from, next) =>{ const requiresAuth = to.meta.requiresAuth const token = store.state.token if (requiresAuth && !token) { next('/login') } else { next() } })
在上面的代碼中,我們將store注入了Vue Router配置中,并在路由導航守衛中使用了store的狀態。通過store.state.token獲取store中的token狀態,如果需要驗證身份并且token不存在,則跳轉到登錄頁。否則,繼續進行路由導航。
除了在導航守衛中使用store,我們還可以在組件中使用store。示例代碼如下:
import {mapState} from 'vuex' export default { name: 'UserProfile', computed: { ...mapState(['user']) }, created() { this.$store.dispatch('getUser') // dispatch一個action獲取用戶數據 }, }
在上面的代碼中,我們使用了mapState將store中的user狀態映射到組件的計算屬性中。該組件created鉤子函數調用this.$store.dispatch('getUser'),為store中的user狀態獲取數據。
總之,Vue Router引入store后可以訪問store中的狀態,并給組件提供了更方便的狀態管理方式。這對于大型的Vue.js應用程序來說非常有用,并且使得狀態管理變得更加優雅。