Vue路由守卫（导航守卫）

2024-06-13 13:14:15

路由守卫包括全局守卫（beforeEach()）、路由独享守卫(beforeEnter())、组件内守卫(beforeRouteEnter()、beforeRouteLeave())

1.全局守卫（beforeEach()）

1.全局前置路由守卫beforeEach()，初始化的时候调用，每次路由切换前调用。
在定义路由router的时候，通过router.beforeEach()来做一些权限管理，比如一个页面需要登录权限，登录了的才能进入这个页面。
在router.js文件

router.beforeEach((to,from,next)=>{if(to.path==="/home/news"){//如果要到/home/mews
if(localStorage.getItem('school')==='atguigu'){//条件1 满足 就跳转
next()
}else{alert(‘学校不对，无权限查看’)
}else{next()
}
}
})

to表示要到的路由，from表示从哪个路由跳转。next()表示放行（即跳转）
2.全局后置后卫afterEach()，初始化的时候调用，每次切换之后调用。

router.afterEach((to,from)=>{document.title='嘻嘻'
})

可以在路由配置的时候设置元信息meta，比如上面的不光是to.path==="/home/news需要权限，很多路由都需要这个权限，解决办法是在路由配置的时候在meta里表明

{path:'/home/news',
component:News,
meta:{isAuth:true
}
}

在验证时候

router.beforeEach((to,from,next)=>{if(to.meta.isAuth){如果要到的路由需要meta.isAuth
if(localStorage.getItem('school')==='atguigu'){//条件1 满足 就跳转
next()
}else{alert(‘学校不对，无权限查看’)
}else{next()
}
}
})

2.路由独享守卫

在定义路由的时候，

path:"/home/news",
name:"news",
component:News,
beforeEnter(to,from,next){if(to.meta.isAuth){if(localStorage.getItem('school'==='atguigu'){next()
}else{alert(‘无权查看’)
}
}
}else{next()
}

在进入这个路由之前，增加条件，满足条件就跳转。

组件内的守卫

和data、created、mounted、methods处于平等关系
1.进入守卫beforeRouteEnter（）
进入守卫，通过路由匹配规则，进入该组件时被调用，在组件的.vue文件

beforeRouteEnter(to,from,next){if(to.meta.isAuth){if(localStorage.getItem('school')==='atguigu'){next()
}else{alert(‘无权查看’)
}
}else{next()
}
}

2.离开守卫beforeRouteLeave()
通过路由规则，离开该组件被调用

beforeRouteLeave(to,from,next){next()
}

Vue路由守卫（导航守卫）相关推荐

vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 1. 导航守卫:拦截组件导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过,如果登陆过,则可以跳转 ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
vue中的路由守卫(导航守卫)
在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断. vue-router提供了导航钩子:全局前置导航钩子 beforeEa ...
2022-11-15 vue笔记-路由vue-router(四) 路由守卫(又称路由拦截,导航守卫)的定义以及示例
文章目录 0.路由的概念 1.路由守卫的定义定义官方解释路由守卫的分类钩子函数 2.路由守卫的使用场景 3.语法:`router.beforeEach((to,from,next) => ...
路由导航守卫/路由拦截/导航守卫
导航守卫: 又称:路由导航守卫.路由拦截都是一样的分为全局守卫.组件守卫.独享守卫全局守卫写在路由页面,写在const router同级之下 const router = new VueRout ...
vue 路由独享守卫
想进到'trade'页面必须从shopcart进来否则进不去 beforeEnter:(to,from,next)=> {if(from.path == '/shopcart'){next( ...
Vue 路由懒加载导航守卫keep-alive
懒加载组件导入方式 const Foo = () => import('./Foo.vue') const router = new VueRouter({routes: [{ path: '/ ...
vue中的组件导航守卫，个人理解
vue中组件导航守卫 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave 今天有遇到一个问题,就是在一个页面新增模块按钮和编 ...
vue-router进阶：路由使用归纳、路由导航守卫、导航守卫解析流程、
一.定义和理解导航守卫的作用:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航. >>项目中应用场景举例:路由页面跳转时候进行登陆验证:路由跳转判断: 有多种机会 ...
react实现路由跳转拦截功能（导航守卫）
react实现路由跳转拦截功能(导航守卫) 背景方法1:通过Prompt组件实现react路由跳转拦截功能 Prompt组件介绍 Prompt组件示例自定义Prompt组件的提示弹窗方法2:通过 ...

最新文章

热门文章