Vue中beforeenter的全面解析

一、beforeenter未匹配

beforeenter是Vue路由守卫中的一种，它可以在路由改变前对路由进行拦截和处理。如果路由需要进行权限验证、登录态检查等操作，可以使用beforeenter来实现。在使用beforeenter时，如果没有匹配到任何路由，则会出现未匹配的情况。这种情况下，页面会出现404 Not Found的错误提示。为了解决这种情况，我们可以使用通配符路由来进行处理。

const router = new VueRouter({
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

在上述代码中，我们使用了通配符路由“*”，对所有未匹配的路由进行了处理，并将它们统一指向了NotFoundComponent组件。

二、beforeenter和beforerouteenter

在Vue中，beforeenter和beforerouteenter都是路由守卫，用来在路由跳转之前进行拦截。它们的区别在于：

• beforeenter：作用在路由配置中
• beforerouteenter：作用在单个路由实例中

beforeenter可以影响到整个路由，而beforerouteenter只能影响到当前路由。因此，在使用路由守卫时，需要根据不同的场景进行选择。

三、beforeenter路由守卫

beforeenter路由守卫是Vue中的一个重要功能，它可以在路由改变前对路由进行拦截和处理。使用beforeenter可以实现路由的权限验证、登录态检查等操作。beforeenter的写法如下：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: HomeComponent,
      beforeEnter: (to, from, next) => {
        if (isLogin) {
          next();
        } else {
          next('/login');
        }
      }
    }
  ]
})

在上述代码中，我们使用了beforeEnter对路由进行了拦截。如果用户没有登录，则路由会被重定向到login页面。

四、beforeenter 无限循环

在使用beforeenter时，如果没有正确地进行跳转处理，就有可能出现无限循环的情况。如果出现了这种情况，就需要对beforeenter进行检查和修改。通常情况下，无限循环的原因是因为未正确设置next()函数。在使用next()函数时，需要保证只调用一次，并且在函数的不同分支中都被调用到。

router.beforeEnter((to, from, next) => {
  if (to.path === '/login') {
    next();
  } else if (isLogin) {
    next();
  } else {
    next('/login');
  }
})

五、beforeenter跳转前等待

在使用beforeenter时，如果需要进行异步操作，就需要在跳转前等待异步操作完成。在Vue2中，我们可以使用beforeRouteEnter加入next回调达到等待异步操作的效果。代码如下：

beforeRouteEnter (to, from, next) {
  axios.get('/api/islogin')
    .then(res => {
      if (res.data.code === 0) {
        next(vm => {
          vm.isLogin = true
        })
      } else {
        next()
      }
    })
}

在上述代码中，我们使用axios进行异步操作，获取当前用户的登录状态。如果用户已登录，我们需要在next回调中对路由进行跳转，并传入vm作为参数，在回调中对组件进行处理。

六、beforeenter和beforeeach

beforeenter和beforeeach都是Vue中路由守卫的一种，用于在路由跳转前进行拦截和处理。它们之间的区别在于：

• beforeenter：作用在路由配置中
• beforeeach：作用在全局路由中

beforeenter只能影响到当前的路由，而beforeeach可以触发多次，影响到所有的路由。因此，在使用路由守卫时，需要根据不同的场景进行选择。

七、beforeenter对单个组件路由守卫

在Vue中，我们可以使用beforeenter对单个组件进行路由守卫处理。beforeenter的写法如下：

export default {
  beforeEnter: (to, from, next) => {
    if (isLogin) {
      next()
    } else {
      next('/login')
    }
  }
}

在上述代码中，我们使用beforeEnter对当前组件进行路由守卫。如果用户已登录，则路由会被跳转到当前组件，否则会被重定向到login页面。

八、beforcentering

beforcentering是Vue中路由守卫的一种，在路由改变前进行拦截和处理。在使用beforcentering时，我们可以使用next(false)来终止当前的路由，并取消跳转行为。代码如下：

router.beforeEnter((to, from, next) => {
  if (to.path === '/login') {
    next();
  } else if (isLogin) {
    next();
  } else {
    next(false);
  }
})

在上述代码中，我们使用next(false)来终止当前路由，并取消跳转行为。

九、beforeenter beforerouterenter

beforeenter和beforerouterenter都是Vue中路由守卫的一种，用于在路由跳转前进行拦截和处理。它们之间的区别在于：

• beforeenter：作用在路由配置中
• beforerouterenter：作用在单个路由实例中

beforeenter可以影响到整个路由，而beforerouterenter只能影响到当前路由。因此，在使用路由守卫时，需要根据不同的场景进行选择。

完整代码示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const isLogin = true;

const HomeComponent = {
  template: `
   
home component
   
`,
  beforeEnter: (to, from, next) => {
    if (isLogin) {
      next();
    } else {
      next('/login');
    }
  }
}

const NotFoundComponent = {
  template: `
   
404 component
   
`
}

const router = new VueRouter({
  routes: [
    { path: '*', component: NotFoundComponent },
    {
      path: '/home',
      component: HomeComponent,
      beforeEnter: (to, from, next) => {
        if (isLogin) {
          next();
        } else {
          next('/login');
        }
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next();
})

export default router;