Full-Stack Vue.js 2 and Laravel 5

Router

The logic for retrieving page state is in the mixin file  route-mixin.js. This mixin adds a beforeRouteEnter hook to a page component which applies the page state to the component instance when it becomes available.

Now that we're storing page state in Vuex we will utilize a different approach. Firstly, we won't need a mixin anymore; we'll put this logic into router.js now. Secondly, we'll use a different navigation guard, beforeEach. This is not a component hook, but a hook that can be applied to the router itself, and it is triggered before every navigation.

You can see in the following code block how I've implemented this in router.js. Note that before next() is called we commit the page state to the store.

resources/assets/js/router.js ...