家居企业网站建设流程,优书网下载,哈尔滨seo优化,网站建设国内外研究现状模板目录
一、什么是Vue路由导航守卫#xff1f;
二、全局守卫
1、beforeEach
下面是一个beforeEach的示例代码#xff1a;
2、beforeResolve
下面是一个beforeResolve的示例代码#xff1a;
3、afterEach
下面是一个afterEach的示例代码#xff1a;
三、路由独享守卫…目录
一、什么是Vue路由导航守卫
二、全局守卫
1、beforeEach
下面是一个beforeEach的示例代码
2、beforeResolve
下面是一个beforeResolve的示例代码
3、afterEach
下面是一个afterEach的示例代码
三、路由独享守卫
1、beforeEnter
下面是一个beforeEnter的示例代码
2、afterEnter
下面是一个afterEnter的示例代码
四、组件内守卫
1、beforeRouteEnter
下面是一个beforeRouteEnter的示例代码
2、beforeRouteUpdate
下面是一个beforeRouteUpdate的示例代码
3、beforeRouteLeave
下面是一个beforeRouteLeave的示例代码
五、总结 一、什么是Vue路由导航守卫 Vue路由导航守卫是Vue Router提供的一种机制它可以让你在路由跳转之前或之后执行一些自定义逻辑例如鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫。 二、全局守卫
全局守卫作用于所有路由包括进入路由、离开路由、进入子路由和离开子路由。全局守卫有三个beforeEach、beforeResolve和afterEach。
1、beforeEach
beforeEach在路由跳转之前被调用它接收三个参数to、from和next。 to即将进入的路由对象from当前导航正要离开的路由对象next函数必须调用next()来resolve钩子。
下面是一个beforeEach的示例代码
router.beforeEach((to, from, next) {if (to.meta.requiresAuth !user.isLoggedIn) { // 鉴权next({path: /login, // 重定向到登录页query: {redirect: to.fullPath} // 保存跳转路径})} else {next() // 继续跳转}
})
上面的代码中我们使用了to.meta.requiresAuth来判断该路由是否需要鉴权如果需要鉴权且用户没有登录则将用户重定向到登录页并通过query参数记录下用户原本想要跳转的路径。
2、beforeResolve
beforeResolve是在导航被确认之前被调用它接收一个参数to。 to即将进入的目标路由对象。
下面是一个beforeResolve的示例代码
router.beforeResolve((to) {console.log(正在进入, to.name || to.path)
})
上面的代码中我们使用了to.name || to.path来获取路由的名称或路径并在控制台输出正在进入的路由名称或路径。
3、afterEach
afterEach在路由跳转之后被调用它接收两个参数to和from。 to即将进入的路由对象from当前导航正要离开的路由对象。
下面是一个afterEach的示例代码
router.afterEach((to, from) {console.log(从, from.name || from.path, 跳转到, to.name || to.path)
})
上面的代码中我们使用了from.name || from.path和to.name || to.path来获取路由的名称或路径并在控制台输出从哪个路由跳转到哪个路由了。
三、路由独享守卫
路由独享守卫作用于单个路由它们在路由配置中定义。路由独享守卫有两个beforeEnter和afterEnter。
1、beforeEnter
beforeEnter在路由切换前被调用它接收三个参数to、from和next。 to即将进入的路由对象from当前导航正要离开的路由对象next函数必须调用next()来resolve钩子。
下面是一个beforeEnter的示例代码
const routes [{path: /dashboard,component: Dashboard,beforeEnter: (to, from, next) {if (user.isAdmin) { // 鉴权next() // 继续跳转} else {next(/forbidden) // 跳转到禁止访问页}}}
]
上面的代码中我们使用了user.isAdmin来判断用户是否是管理员如果是管理员则可以访问/dashboard路由否则跳转到/forbidden路由。
2、afterEnter
afterEnter在路由切换后被调用它接收一个参数to。 to即将进入的目标路由对象。
下面是一个afterEnter的示例代码
const routes [{path: /dashboard,component: Dashboard,afterEnter: (to) {console.log(to.name || to.path, 已进入)}}
]
上面的代码中我们使用了to.name || to.path来获取路由的名称或路径并在控制台输出已进入该路由。
四、组件内守卫
组件内守卫作用于单个组件它们与全局守卫和路由独享守卫不同的是它们不需要在路由配置中定义而是在组件内定义。
1、beforeRouteEnter
beforeRouteEnter在路由进入组件前被调用它接收三个参数to、from和next。 to即将进入的路由对象from当前导航正要离开的路由对象next函数必须调用next()来resolve钩子。
下面是一个beforeRouteEnter的示例代码
export default {beforeRouteEnter(to, from, next) {if (user.hasPermission) { // 鉴权next() // 继续进入该组件} else {next(false) // 禁止进入该组件}}
}
上面的代码中我们使用了user.hasPermission来判断用户是否有权限进入该组件如果有权限则进入该组件否则禁止进入该组件。
2、beforeRouteUpdate
beforeRouteUpdate在路由进入组件后组件复用时被调用它接收两个参数to和from。 to即将进入的路由对象from当前导航正要离开的路由对象。
下面是一个beforeRouteUpdate的示例代码
export default {beforeRouteUpdate(to, from) {console.log(从, from.name || from.path, 到, to.name || to.path)}
}
上面的代码中我们使用了from.name || from.path和to.name || to.path来获取路由的名称或路径并在控制台输出从哪个路由跳转到哪个路由了。
3、beforeRouteLeave
beforeRouteLeave在路由离开组件时被调用它接收两个参数to和from和next。 to即将进入的路由对象from当前导航正要离开的路由对象next函数必须调用next()来resolve钩子。
下面是一个beforeRouteLeave的示例代码
export default {beforeRouteLeave(to, from, next) {if (shouldLeave) { // 确认是否离开next() // 继续离开} else {next(false) // 禁止离开}}
}
上面的代码中我们使用了shouldLeave来判断用户是否要离开该组件如果要离开则继续离开否则禁止离开。
五、总结
Vue路由导航守卫是Vue Router提供的一种机制可以让你在路由跳转之前或之后执行一些自定义逻辑例如鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫每种守卫都有自己的使用场景。在使用守卫时需要注意它们的执行顺序和next函数的使用避免出现无限循环的情况。
