title: VueRouter, VueJS, and Laravel route guard
body: <p>I wanted to hide a particular page of my application behind a layer of security (a simple passcode form that will send a request to the server for validation).</p>
  
  <p>Based off the documentation of VueRouter, I figured a <code>beforeEnter</code> would be appropriate. However, I am not entirely sure how one would require a user to access a particular component, and then successfully enter a passcode before being allowed to proceed to this current route.</p>
  
  <p>Does anyone have an example of this? I am having trouble finding anything similar.</p>
  
  <pre><code>import Vue from 'vue';
  import VueRouter from 'vue-router';
  
  Vue.use(VueRouter);
  
  const routes = [
    { path: '/test/:testURL', component: require('./components/test.vue'), 
      beforeEnter: (to, from, next) =&gt; {
             // somehow load another component that has a form
             // the form will send a request to Laravel which will apply some middleware
             // if the middleware successfully resolves, this current route should go forward. 
      }
    },
  ];
  
  const router = new VueRouter({
    routes,
    mode: 'history',
  });
  
  const app = new Vue({
    router
  }).$mount('#app');
  </code></pre>