Abdelaziz Mokhnache Abdelaziz Mokhnache -3 years ago 335
Javascript Question

How to redirect to a different url inside the vue-router beforeRouteEnter hook?

I am building an admin page with Vue.js 2 and I want to prevent unauthenticated users from accessing the

route and redirect them to
. For that I have used the In-Component Guard
in the Admin component like follows

beforeRouteEnter(to, from, next) {
if(userNotLogedIn) {

The problem here is that
is not defined in
hook. So what's the proper way to access
and redirect to a different url in this case ?

Answer Source

The documentation states that:

The beforeRouteEnter guard does NOT have access to this, because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet.

You can redirect to another page by calling next like this:

beforeRouteEnter(to, from, next) {
  if(userNotLogedIn) {

Here is another way to accomplish the same result: So instead of using beforeRouteEnter on each protected route, you could define protected routes in your router configuration using a meta property, then use beforeEach hook on all the routes and check for protected routes and redirect to login page when needed:

let router = new Router({    
  mode: 'history',    
  routes: [    
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: {
        auth: true // A protected route
      path: '/login',
      name: 'Login',
      component: Login, // Unprotected route

/* Use this hook on all the routes that need to be protected 
instead of beforeRouteEnter on each one explicitly */

router.beforeEach((to, from, next) => {    
  if (to.meta.auth && userNotLogedIn) {
  else {

// Your Vue instance
new Vue({
  el: '#app',
  // ...
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download