title: How to get something to run before vue-router
body: <p>I am building my first SPA and I am facing some issues. This is how it is designed:</p>
  
  <ol>
  <li>Laravel &amp; Laravel Views handle the login and registration related pages.</li>
  <li>SPA starts at the user logged in page.</li>
  <li>My app.js defines a default VueJS app in which I use the <code>mounted()</code> method to set the state (VUEX) of the logged in user. Ideally, all it does is get the user details via an axios call to the Laravel backend and populate the VUEX state.</li>
  <li>I use <code>beforeEnter()</code> methods in the route definitions to ensure only authorized people can navigate to the route.</li>
  </ol>
  
  <p>This is where I face the problem. When a user logs in, it seems like router is executed before the vuex is set. Say I have a url /dashboard and /user/1. When I try to go to user/1 it works perfectly if it is after I load the application. But, if I refresh the webpage when I am in user/1, then router <code>beforeEnter</code> cannot find vuex state of the user so it redirects user to dashboard. This is because when the router runs <code>beforeEnter</code>, if it is a fresh page load, it wouldn't have access to the user Vuex state or it has access, but the value isn't set yet.</p>
  
  <p>Because of this my biggest problem is I can't link to a route page directly since it always lands in dashboard and then the user will have to go to the route for it to work. How can I handle this situation?</p>