Vue2如何添加路由守卫

Vue2 中添加路由守卫可以通过 `router.beforeEach` 方法来实现。

具体步骤如下：

1. 在 `router/index.js` 中导入 Vue 和 Vue Router：

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)

2. 定义路由：

   const routes = [
     {
       path: '/login',
       component: Login
     },
     {
       path: '/home',
       component: Home
     }
   ]

3. 创建 Vue Router 实例：

   const router = new VueRouter({
     routes
   })

4. 添加路由守卫：

   router.beforeEach((to, from, next) => {
     // 判断用户是否登录
     const token = localStorage.getItem('token')
     if (to.path !== '/login' && !token) {
       next('/login')
     } else {
       next()
     }
   })

上述代码中，`beforeEach` 方法接收三个参数：

- `to`：即将要进入的路由对象。
- `from`：当前导航正要离开的路由对象。
- `next`：用于跳转到其他路由的函数。

在路由跳转前，我们可以通过判断用户是否登录来决定是否允许路由跳转。如果用户未登录且要跳转到其他路由，则跳转到登录页；否则允许路由跳转。