乐趣区

关于前端:Vue路由守卫有哪些怎么设置使用场景等

vue 中路由守卫一共有三种,一个全局路由守卫,一个是组件内路由守卫,一个是 router 独享守卫。

一、全局路由守卫

所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都须要通过这个大门的查看
全局路由守卫有个两个:一个是全局前置守卫,一个是全局后置守卫

router.beforeEach((to, from, next) => {console.log(to) => // 到哪个页面去?
console.log(from) => // 从哪个页面来?
next() => // 一个回调函数}
router.afterEach(to,from)= {}

next():回调函数参数配置

next(false): 中断以后的导航。如果浏览器的 URL 扭转了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址
next(’/’) 或者 next({path:‘/’}): 跳转到一个不同的地址。以后的导航被中断,而后进行一个新的导航。你能够向 next 传递任意地位对象,且容许设置诸如 replace: true、name:‘home’之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项

二、组件路由守卫

// 跟 methods: {}等同级别书写,组件路由守卫是写在每个独自的 vue 文件外面的路由守卫

beforeRouteEnter (to, from, next) {//
留神,在路由进入之前,组件实例还未渲染,所以无奈获取 this 实例,只能通过 vm 来拜访组件实例 next(vm => {}) }
beforeRouteUpdate (to, from, next) {// 同一页面,刷新不同数据时调用,}
beforeRouteLeave (to, from, next) {// 来到以后路由页面时调用}

三、路由独享守卫

路由独享守卫是在路由配置页面独自给路由配置的一个守卫

export default new VueRouter({routes: [
{
path:‘/’,
name:‘home’,
component:‘Home’,
beforeEnter: (to, from, next) => {
// …
}
} ] })

vue-router 提供了导航钩子: 全局前置导航钩子 beforeEach 和全局后置导航钩子 afterEach,他们会在路由行将扭转前和扭转后进行触发。所以判断用户是否登录须要在 beforeEach 导航钩子中进行判断。

每个守卫办法接管三个参数:

to: Route: 行将要进入的指标 路由对象

from: Route: 以后导航正要来到的路由

next: Function: 肯定要调用该办法来 resolve 这个钩子。

在我的项目中,个别在 beforeEach 这个钩子函数中进行路由跳转的一些信息判断。
判断是否登录,是否拿到对应的路由权限等等。

理解更多前端面试相干技术常识欢送关注小编前端培训技术专栏!

退出移动版