Detailed explanation of Vue routing guard and analysis of its application scenarios

With the continuous development of front-end technology, Vue as a development framework is becoming more and more popular among developers. The routing mechanism of Vue is also an integral part of the Vue framework. Routing systems can help developers build complex single-page applications while also providing a flexible way to manage page state and user navigation. In this case, Vue routing guard becomes a knowledge point that must be mastered.

So, what is Vue routing guard? In Vue.js, routing guards are a mechanism used to control jumps between pages. They are mainly used for operations such as permission verification and status management during page navigation. Vue route guards are mainly divided into three types: global route guards, route exclusive guards and component-level guards.

Global route guard:

Global route guard means a block of code that must be executed when all routes change. There are three main types of global route guards:

1. beforeEach(to, from, next)

Called before the route enters, you can perform permission verification and other operations here. The parameters to and from represent the routing objects that are about to enter and are about to leave respectively.

The sample code is as follows:

router.beforeEach((to, from, next) => {
  // 进行权限验证等操作
  if (to.meta.requireAuth) {
    if (localStorage.getItem('token')) {
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next();
  }
})

2. afterEach(to, from)

is called after the route enters and is generally used for operations such as logging.

The sample code is as follows:

router.afterEach((to, from) => {
  // 记录日志等操作
})

3. beforeResolve(to, from, next)

Call after the route is parsed, only use lazy loading of routes Sometimes useful.

The sample code is as follows:

router.beforeResolve((to, from, next) => {
  // 进行路由解析后的处理
  next();
})

Route exclusive guard:

Route exclusive guard is a guard for a certain route. It is only guarded when the current route enters or leaves. transfer. Usage is as follows:

The sample code is as follows:

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 进行权限验证等操作
        if (localStorage.getItem('admin')) {
          next();
        } else {
          next({
            path: '/login',
            query: {redirect: to.fullPath}
          })
        }
      }
    }
  ]
})

Component level guard:

Component level guard refers to the navigation guard inside the component and can be used to manage the internal state of the component. There are four main types of component-level guards:

1. beforeRouteEnter(to, from, next)

Called before route entry and used when accessing the internal state of the component.

The sample code is as follows:

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteEnter(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      // 访问不到组件实例
      next(vm => {
        vm.user = user
      })
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

2. beforeRouteLeave(to, from, next)

Called before the route leaves, it can be used to confirm whether to leave. Current route or save modification operation.

The sample code is as follows:

export default {
  data() {
    return {
      text: ''
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.text !== '') {
      const confirmMsg = '您的修改还未保存，确定要离开吗？'
      if (confirm(confirmMsg)) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  }
}

3. beforeRouteUpdate(to, from, next)

Called when the current route is updated, used to update the internal state of the component .

The sample code is as follows:

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteUpdate(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      this.user = user
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

4. beforeRouteLeave(to, from, next)

is called during route rendering and can be used for server-side rendering Wait for operations.

The sample code is as follows:

export default {
  beforeRouteRender(to, from, next) {
    // 进行服务器端渲染等操作
    next();
  }
}

Through the above introduction of routing guards, we can find that routing guards have many application scenarios, such as determining whether to log in, performing permission verification, saving modification operations, etc. Different scenarios require the use of different routing guards, and you need to choose the appropriate guard for processing during development.

In short, Vue route guard is a very important part. If used properly, it can greatly improve the security and stability of the application. Therefore, developers need to have a deeper understanding of the usage and application scenarios of route guards.

The above is the detailed content of Detailed explanation of Vue routing guard and analysis of its application scenarios. For more information, please follow other related articles on the PHP Chinese website!