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: ...
import axios from 'axios'; import store from './store';
let router = new VueRouter({ ... });
router.beforeEach((to, from, next) => { let serverData =
JSON.parse(window.vuebnb_server_data); if (!serverData.path || to.path !==
serverData.path) { axios.get(`/api${to.path}`).then(({data}) => {
store.commit('addData', {route: to.name, data}); next(); }); } else {
store.commit('addData', {route: to.name, data: serverData}); next(); } });
export default router;
With that done, we can now delete the route mixin: $ rm
resources/assets/js/route-mixin.js