vue 路由守卫放在哪里

在 Vue.js 中，路由守卫可以放在路由配置文件中。通常情况下，我们会在 `router/index.js` 文件中定义路由配置信息，同时也可以在该文件中定义路由守卫。

在 `router/index.js` 文件中，可以使用 `router.beforeEach()` 方法来定义全局路由守卫，该守卫会在每次路由跳转之前被调用。也可以在具体的路由配置信息中，通过 `beforeEnter` 属性来定义该路由的路由守卫。

以下是一个示例代码，用于在 `router/index.js` 文件中定义全局路由守卫：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requireAuth: true
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.meta.requireAuth) {
    if (token) {
      next()
    } else {
      next({
        path: '/login'
      })
    }
  } else {
    next()
  }
})

export default router

在上面的代码中，我们在 `beforeEach` 方法中定义了全局路由守卫。它会在每次路由跳转之前被调用，并且会检查当前路由是否需要身份验证，如果需要身份验证，则会检查当前用户是否已经登录，如果已经登录，则允许路由跳转，否则会跳转到登录页面。

注意，路由守卫的定义顺序很重要，如果定义了多个路由守卫，则会按照定义的顺序依次执行。因此，在定义路由守卫时，应该注意执行顺序的问题。