title: How can I inject data get in router.beforeEach in my vuejs component?
body: <p>I use router.beforeEach to protect some view. I fetch my user before entering in my vue. I want to use this user in all my authenticated pages. How can I inject data get in router.beforeEach in my vuejs component?</p>
  
  <p>Here my routes definition:</p>
  
  <pre><code>import Vue from 'vue';
  import VueRouter from 'vue-router';
  import AuthService from './services/AuthService';
  
  import Index from './pages/Index.vue';
  
  Vue.use(VueRouter);
  
  const routes = [
      {path: '/', name: 'index', component: Index, meta: {requiresAuth: true}},
      ...
  ];
  
  const router = new VueRouter({
      routes
  });
  
  router.beforeEach((to, from, next) =&gt; {
      if (to.matched.some(record =&gt; record.meta.requiresAuth)) {
          AuthService().getUser(user =&gt; {
              if (user) {
                  next(vm =&gt; {
                      vm.user = user
                  });
              } else {
                  ...
              }
          });
      }
      ...
  });
  
  export default router;
  </code></pre>
  
  <p>here my Index.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          {{user}}
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script type="text/ecmascript-6"&gt;
      export default {
          data(){
              console.log(this.user);
              console.log(this.$route.user);
              return {}
          },
          mounted(){
              console.log(this.user);
              console.log(this.$route.user);
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Everything is undefined</p>
  
  <p>I don't want to make a <code>beforeRouteEnter</code> in my component because it will make a second API call.</p>