vue路由拦截

 

Vue路由拦截是指在Vue项目中通过Vue Router对路由进行拦截和处理的一种机制。

 

在Vue项目中，我们经常会遇到需要对某些页面进行权限控制或者参数校验的情况。这时，我们可以使用Vue路由拦截来实现这些需求。

 

Vue路由拦截的具体实现是通过Vue Router提供的导航守卫来实现的。导航守卫是Vue Router中一个非常重要的概念，它主要用于控制路由跳转的行为。

 

Vue Router提供了三个常用的导航守卫：全局前置守卫beforeEach、全局解析守卫beforeResolve和全局后置守卫afterEach。

 

全局前置守卫beforeEach是在路由跳转之前被调用的守卫。我们可以在该守卫中进行权限验证、参数校验等操作。beforeEach守卫接收三个参数：to、from和next。to表示即将要跳转的路由，from表示当前所在的路由，next是一个函数，调用它可以继续执行路由跳转。

 

下面是一个示例：

 

```javascript

import router from './router'

 

router.beforeEach((to

from

next) => {

// 判断用户是否登录

const isLogin = localStorage.getItem('isLogin')

if (to.meta.requireAuth) {

// 需要登录才能访问的页面

if (isLogin) {

next()

} else {

next('/login')

}

} else {

// 不需要登录就能访问的页面

next()

}

})

```

 

在上面的代码中，我们判断了用户是否登录，如果用户需要登录才能访问的页面，但是用户没有登录，就会被跳转到登录页面。

 

除了全局前置守卫beforeEach，Vue Router还提供了全局解析守卫beforeResolve和全局后置守卫afterEach。

 

全局解析守卫beforeResolve会在路由跳转之前被调用，但是在组件渲染之前被调用。我们可以在该守卫中进行一些耗时的操作，比如获取权限信息。

 

```javascript

router.beforeResolve((to

from

next) => {

// 获取用户权限信息

const permission = localStorage.getItem('permission')

if (permission) {

// 将权限信息保存到路由元信息中

to.meta.permission = permission

next()

} else {

next()

}

})

```

 

全局后置守卫afterEach会在每次路由跳转之后被调用。我们可以在该守卫中进行一些统计和日志记录等操作。

 

```javascript

router.afterEach((to

from) => {

// 记录页面访问日志

console.log(`From ${from.path} to ${to.path}`)

})

```

 

除了全局守卫，Vue Router还提供了局部守卫，也就是在路由配置中定义的守卫。局部守卫可以用来处理某个特定路由的跳转逻辑，比如登录页面。

 

```javascript

const routes = [

{

path: '/'

 

component: Home

}

 

{

path: '/login'

 

component: Login

 

beforeEnter: (to

from

next) => {

const isLogin = localStorage.getItem('isLogin')

if (isLogin) {

next('/')

} else {

next()

}

}

}

]

```

 

在上面的代码中，我们定义了一个名为beforeEnter的局部守卫，用来判断用户是否已经登录。如果用户已经登录，就会被跳转到首页。

 

总结来说，Vue路由拦截通过Vue Router提供的导航守卫来实现，通过在全局守卫和局部守卫中进行一些逻辑处理，可以实现对路由的拦截和处理。这样，我们就可以对路由进行权限控制、参数校验等操作，实现更加灵活和安全的路由跳转。