核心函数:router.beforeEach((to, from, next) => {}
Vue Router中的全局前置守卫,用于在每次路由切换之前执行一些逻辑。
to
: 表示即将要进入的目标路由对象。from
: 表示当前导航正要离开的路由对象。next
: 是一个函数,用于控制路由跳转
代码案例:
限制用户在未登录的情况下访问非根路径,但允许访问注册页面。已登录的用户可以自由访问所有路径。
import router from './router'
router.beforeEach((to, from, next) => {
// 从localStorage中获取名为'1212'的用户信息,并解析为对象
const user = JSON.parse(localStorage.getItem('1212'))
// 如果用户信息不存在
if (!user) {
// 如果用户访问的路径不是根路径'/'
if (to.path !== '/') {
// 如果用户访问的路径是'/register'
if (to.path === '/register') {
// 允许用户继续访问
next()
return
}
// 重定向用户到根路径'/'
next({ path: '/' })
} else {
// 如果用户访问的是根路径'/',允许用户继续访问
next()
}
} else {
// 如果用户信息存在,允许用户继续访问
next()
}
})