一.路由守卫就是：

比如说，当点击商城的购物车的时候，需要判断一下是否登录，如果没有登录，就跳转到登录页面，如果登陆了，就跳转到购物车页面，相当于有一个守卫在安检

路由守卫有三种：
1：全局钩子： beforeEach、 afterEach
2：独享守卫（单个路由里面的钩子）： beforeEnter、 beforeLeave
3：组件内守卫：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

全局守卫

router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发
每个守卫方法接收三个参数：

①to: Route: 即将要进入的目标路由对象（to是一个对象，是将要进入的路由对象，可以用to.path调用路由对象中的属性）

②from: Route: 当前导航正要离开的路由

③next: Function: 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。

【路由守卫写在main.js文件，或者写在router文件夹下的index.js文件】

① 前置路由守卫（每次切换前被调用）

首先先在需要配置路由守卫的地方加上 meta: { isAuth: true }

    {path: '/',name: 'Home',component: () => import('../views/Home.vue'),meta: { isAuth: true, title:'主页' },},

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {//如果路由需要跳转if (to.meta.isAuth) {//判断 如果school本地存储是qinghuadaxue的时候，可以进去if (localStorage.getItem('school') === 'qinghuadaxue') {next()  //放行} else {alert('抱歉，您无权限查看！')}} else {// 否则，放行next()}
})

② 后置路由守卫（每次切换后被调用）

是路由跳转之后执行的事件，可以用作跳转路由后更改网页名

首先路由的meta需要配置title的名字

    {path: '/',name: 'Home',component: () => import('../views/Home.vue'),meta: { isAuth: true, title:'主页' },},

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {document.title = to.meta.title || '默认名'    //修改网页的title
})

③ 独享路由守卫（某一个路由所单独享用的路由守卫）

独享路由守卫只有前置没有后置

    {path: '/',name: 'Home',component: () => import('../views/Home.vue'),meta: { isAuth: true },beforeEnter: (to, from, next) => {if (to.meta.isAuth) { //判断是否需要授权if (localStorage.getItem('school') === 'qinghuadaxue') {next()  //放行} else {alert('抱歉，您无权限查看！')}} else {next()  //放行}}},

④ 组件内守卫（某一个路由所单独享用的路由守卫）

独享路由守卫只有前置没有后置，直接写在.vue文件中

//通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next) {if(toString.meta.isAuth){if(localStorage.getTime('school')==='qinghuadaxue'){next()}else{alert('学校名不对，无权限查看！')}} else{next()}
},//通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next) {next()
}

Vue路由守卫（通俗易懂）相关推荐

vue路由守卫中next方法的理解
vue路由守卫中next方法的理解在网上看到了一篇通俗易懂的文章,此文章出处在这里我用通俗点的说法解释上next(),next(false),next('/'),next(error),希望通过这 ...
reactrouter4路由钩子_react router @4 和 vue路由详解(八)vue路由守卫
13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据from和to来判断是哪个路由触发) const router = new VueRouter({ ... }) ...
vue路由守卫死循环及next原理解释
在使用vue路由守卫的beforeEach方法时可能会出现无限递归,也就是死循环的问题,根本原因在于next()方法在不合适的地方错误调用所致,先来看一下官方对next()方法的解释: befor ...
Vue路由守卫（导航守卫）及使用场景
目录前言一.路由守卫是什么? 二.路由守卫全解析先来看一下钩子函数执行后输出的顺序吧 1.全局路由守卫 2.组件路由守卫 3.路由独享守卫单独介绍一下路由守卫钩子三个参数前言最近在学习vu ...
VUE路由守卫_前端实现权限验证
VUE路由守卫_权限验证引言: 本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫:未登录时会限制访问某些页面(前台控制),与之前的Shiro不同: 文章目录 VUE路由 ...
vue路由守卫有哪三种类型
vue中路由守卫一共有三种,分别为:全局路由守卫(全局前置守卫.全局后置守卫),组件内路由守卫,路由独享守卫(是在路由配置页面单独给路由配置的一个守卫). 路由守卫,也可以是路由拦截,我们可以通过路由 ...
vue路由守卫beforeEach和afterEach
路由守卫路由前置守卫beforeEach 路由在每次切换之前,都会到用一个函数:beforeEach 举个简单的栗子:如果当前跳转的路由路径是/home或者/about时才能查看页面,否则提示无权限 ...
VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明
最近因为next()遇到了不少问题,在这里记录一下首先是路由守卫,是不是感觉简简单单 beforeEach((to, from, next) => {to // 要去的路由from // 当前 ...
Vue路由守卫（导航守卫）
路由守卫包括全局守卫(beforeEach()).路由独享守卫(beforeEnter()).组件内守卫(beforeRouteEnter().beforeRouteLeave()) 1.全局守卫(b ...
vue路由守卫的使用
使用路由守位我们需要使用vuex来存放全局的用户信息 ①存在全局用户信息 1.首先展示我的项目路径 2.store/index.js文件内容如下: 这里主要是引入一些文件,以及进行挂载 import ...

Vue路由守卫（通俗易懂）

一.路由守卫就是：

全局守卫

【路由守卫写在main.js文件，或者写在router文件夹下的index.js文件】

① 前置路由守卫（每次切换前被调用）

② 后置路由守卫（每次切换后被调用）

③ 独享路由守卫（某一个路由所单独享用的路由守卫）

④ 组件内守卫（某一个路由所单独享用的路由守卫）

Vue路由守卫（通俗易懂）相关推荐

最新文章

热门文章