title: BeforeRouteEnter function in App.vue
body: <p>I have a problem with my  Vuejs code!</p>
  
  <p>I have a Vuejs application in which I installed Vue-router and Vuex!
  I have configured my router and I have actions in my store that allow me to extract data from my PHP API.</p>
  
  <p>The problem is that I need to do things (<strong>check if an Xhr token exists in the localStorage do an xhr query with the store dispatch method to load the user-related data otherwise do nothing</strong> ) <em>only if the user reloads the page otherwise if the user goes from page to page with the Vue-router system no request should be sent.</em></p>
  
  <p>For that, I thought to use VueRouter BeforeRouteEnter in my App.Vue component. But the problem is that it does not work in the <strong>App.Vue</strong> (I did not understand why) but works in other components related to the routes.</p>
  
  <p>I tried then to use the <strong>vuejs created() hook</strong>! It allows to make requests xhr but since these requests are asynchronous the page loads while the data have not arrived yet which leads to errors.</p>
  
  <p><strong>My App.Vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app" class="uk-offcanvas-content"&gt;
      &lt;div v-if="!loading"&gt;
        &lt;activation-alert v-if="authCheck &amp;&amp; !activated &amp;&amp; !arr.includes($route.name)"/&gt;
        &lt;navbar v-if="!isMobile"/&gt;
        &lt;mobile-navbar v-if="isMobile"/&gt;
        &lt;vue-progress-bar&gt; &lt;/vue-progress-bar&gt;
        &lt;router-view /&gt;
        &lt;off-canvas v-if="!isMobile"/&gt;
      &lt;/div&gt;
      &lt;div v-else&gt;
        &lt;overlay-loader/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import store from './store/index'
  import Navbar from '@/components/Utils/Navbar/Navbar'
  import MobileNavbar from './components/Mobile/Navbar'
  import OffCanvas from '@/components/Utils/Navbar/OffCanvas'
  import ActivationAlert from '@/components/Auth/Activation-Alert'
  import OverlayLoader from '@/components/Utils/OverlayLoader'
  import {mapGetters} from 'vuex'
  import DeviceInformation from './Classes/DeviceInformation'
  
  let app = {
    name: 'App',
    store,
    data () {
      return {
        arr: ['login', 'register', 'forgot-password',
          'change-password', 'blocked', 'activation'],
        loading: false
      }
    },
    components: {
      Navbar,
      OffCanvas,
      ActivationAlert,
      OverlayLoader,
      MobileNavbar
    },
    computed: {
      ...mapGetters(['activated', 'authCheck', 'isMobile'])
    },
    beforeRouteEnter (to, from, next) {
      console.log(to, from, next) // no output
    },
    mounted () {
      (new DeviceInformation(this)).load()
      this.$Progress.finish()
      global.vm = this
    },
    created () {
      let token = window.localStorage.getItem('xhrToken')
      if (typeof token !== 'undefined' &amp;&amp; token !== null) {
        store.dispatch('setUserIfAuthenticated')
          .then(() =&gt; { this.loading = false })
      } else {
        store.dispatch('notAuth')
          .then(() =&gt; { this.loading = false })
      }
  
      this.$Progress.start()
      this.$router.beforeEach((to, from, next) =&gt; {
        if (to.meta.progress !== undefined) {
          let meta = to.meta.progress
          this.$Progress.parseMeta(meta)
        }
        this.$Progress.start()
        next()
      })
      this.$router.afterEach((to, from) =&gt; {
        this.$Progress.finish()
      })
    }
  }
  export default app
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    @import "../node_modules/semantic-ui-dimmer/dimmer.css";
  &lt;/style&gt;
  </code></pre>
  
  <p>** My Router **</p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import Register from '../components/Auth/Register'
  import Login from '../components/Auth/Login'
  import Home from '../components/Home/Home'
  import Test from '../components/Test'
  import Blocked from '../components/Auth/Blocked'
  import Profile from '../components/Auth/Profile/Profile'
  import Activation from '../components/Auth/Activation'
  import ForgotPassword from '../components/Auth/ChangePassword/ForgotPassword'
  import ChangePassword from '../components/Auth/ChangePassword/ChangePassword'
  import JustRegisteredSteps from '../components/Auth/JustRegisteredSteps'
  import {auth, guest} from '../services/middleware'
  
  Vue.use(Router)
  
  let router = new Router({
    mode: 'history',
    saveScrollPosition: true,
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home
      },
      {
        path: '/test',
        name: 'Test',
        component: Test
      },
      {
        path: '/register',
        name: 'register',
        component: Register,
        beforeEnter: guest
      },
      {
        path: '/login',
        name: 'login',
        component: Login,
        beforeEnter: guest
      },
      {
        path: '/blocked',
        name: 'blocked',
        component: Blocked,
        beforeEnter: guest
      },
      {
        path: '/forgot-password',
        name: 'forgot-password',
        component: ForgotPassword,
        beforeEnter: guest
      },
      {
        path: '/password/reset/:token',
        name: 'change-password',
        component: ChangePassword,
        beforeEnter: guest
      },
      {
        path: '/profile/:page?',
        name: 'profile',
        component: Profile,
        beforeEnter: auth
      },
      {
        path: '/activation/:action',
        name: 'activation',
        component: Activation,
        beforeEnter: auth
      },
      {
        path: '/set-profile',
        name: 'just-registered-steps',
        component: JustRegisteredSteps,
        beforeEnter: auth
      }
    ]
  })
  
  router.options.routes.forEach(function (el) {
    el['meta'] = {
      progress: {
        func: [
          {call: 'color', modifier: 'temp', argument: '#ffb000'},
          {call: 'fail', modifier: 'temp', argument: '#6e0000'},
          {call: 'location', modifier: 'temp', argument: 'top'},
          {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
        ]
      }
    }
  })
  export default router
  </code></pre>