router.beforeEach

`router.beforeEach` 是 Vue Router 中的导航守卫之一，用于在路由切换前进行一些操作，例如身份验证、页面访问权限控制等。

`router.beforeEach` 可以接受三个参数：

1. `to`：即将要进入的目标路由对象
2. `from`：当前导航正要离开的路由对象
3. `next`：调用该方法来 resolve 这个钩子，必须调用 `next`，否则钩子就不会被 resolved。

在 `router.beforeEach` 中，我们可以通过判断用户是否登录或者拥有访问权限等信息来决定是否进行路由跳转。例如：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

在上面的例子中，我们判断用户是否登录，如果用户未登录且访问的路由需要身份验证，则跳转到登录页面；否则，继续路由跳转。

相关问题

router.beforeEach和 router.afterEach区别

`router.beforeEach` 和 `router.afterEach` 是 Vue Router 提供的两个路由导航守卫钩子函数，它们在路由导航过程中起到不同的作用。

1. `router.beforeEach`：
- 作用：在每次路由切换之前执行，用于进行全局的前置拦截。
- 使用场景：可以用于进行用户身份验证、路由权限控制等操作，例如检查用户是否登录，如果未登录，则重定向到登录页面。

2. `router.afterEach`：
- 作用：在每次路由切换之后执行，用于进行全局的后置处理。
- 使用场景：可以用于进行页面切换后的一些操作，例如页面埋点统计、滚动行为控制等。

两者的区别主要在于执行的时机和目的：
- `beforeEach` 在路由切换之前执行，可以对即将进入的路由进行拦截和处理。
- `afterEach` 在路由切换之后执行，可以对已经进入的路由进行处理。

示例代码如下：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    // 路由配置...
  ]
});

router.beforeEach((to, from, next) => {
  // 路由切换之前的处理逻辑
  // 比如进行用户身份验证、权限控制等

  // 验证通过，继续路由切换
  next();
});

router.afterEach((to, from) => {
  // 路由切换之后的处理逻辑
  // 比如埋点统计、滚动行为控制等
});

export default router;

在这个例子中，beforeEach` 路由守卫用于进行用户身份验证或权限控制，如果验证通过，则调用 `next()`

$router.beforeEach

是一个 Vue Router 的守卫钩子函数，它会在每个路由跳转前被调用。它的作用是在路由切换前进行一些操作，比如验证用户是否登录、权限验证等。这个钩子函数接收三个参数：to、from 和 next。to 表示即将跳转的目标路由对象，from 表示当前的路由对象，next 是一个函数，用于控制路由跳转的行为。在 beforeEach 钩子函数中，你可以根据需要来执行一些逻辑操作，并决定是否允许或者拦截路由跳转。如果调用 next()，则允许路由跳转；如果调用 next(false)，则取消当前的路由跳转；如果调用 next('/path')，则会跳转到指定的路径。