vue全家桶进阶之路37:Vue3 路由守卫
在 Vue.js 3.x 中,我们可以使用路由守卫来拦截路由的跳转,从而实现一些功能,例如:登录验证、页面权限控制等。
Vue.js 3.x 中的路由守卫和 Vue.js 2.x 中的基本相同,都包含了 beforeEach
、beforeResolve
和 afterEach
等钩子函数。
下面是一些常见的路由守卫用法示例:
beforeEach
beforeEach
在跳转之前被调用,可以用来进行登录验证等操作。示例代码如下:
import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/user/:id', component: User } ] }) router.beforeEach((to, from, next) => { // 验证是否已登录 const loggedIn = false if (to.path !== '/' && !loggedIn) { next('/') } else { next() } })
在上述示例中,我们使用 beforeEach
路由守卫验证用户是否已登录,如果没有登录则跳转到首页。
beforeResolve
beforeResolve
在跳转之前被调用,并且在 beforeEach
之后,可以用来进行一些异步操作等操作。示例代码如下:
import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/user/:id', component: User, beforeResolve: async (to, from, next) => { // 异步操作 await someAsyncOperation() next() } } ] })
在上述示例中,我们使用 beforeResolve
路由守卫进行了一些异步操作,然后在操作完成后调用了 next
方法继续跳转。
afterEach
afterEach
在跳转完成之后被调用,可以用来进行一些页面操作等操作。示例代码如下:
import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/user/:id', component: User } ] }) router.afterEach((to, from) => { // 页面操作 console.log(`从 ${from.path} 跳转到 ${to.path}`) })
在上述示例中,我们使用 afterEach
路由守卫进行了一些页面操作,例如在控制台中输出了跳转信息。