vue如何使用路由拦截器
在 Vue 中使用路由拦截器需要使用 Vue Router 提供的 beforeEach 方法。beforeEach 方法会在每个路由切换前，对路由进行拦截处理。可以在这个方法中进行一些验证或者权限认证，如果满足条件则继续跳转，否则取消跳转并进行相应处理。
下面是一个示例：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard
},
{
path: '/login',
name: 'login',
component: Login
}
]
})
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.name !== 'login' && !isAuthenticated) {
next({ name: 'login' })
} else {
next()
}
})
export default router
在这个示例中，使用了 localStorage 来保存用户的 token 信息，用于验证用户是否已登录。如果用户未登录，但是又尝试访问其他需要登录的页面，则会被重定向到登录页面。如果用户已登录，则自动跳转到访问的页面。
需要注意的是，beforeEach 方法是在路由切换前执行的，因此在其中异步操作需要使用 Promise 来处理。