vue路由守卫beforeEach和afterEach
路由守卫
路由前置守卫beforeEach
路由在每次切换之前,都会到用一个函数:beforeEach
举个简单的栗子:如果当前跳转的路由路径是/home或者/about时才能查看页面,否则提示无权限:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{path: '/home',name: 'Home',component: Home},{path: '/about',name: 'About',component: () => import('../views/About.vue')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})//全局配置路由守卫,初始化被调用、每次路由切换被调用
router.beforeEach((to,from,next)=>{//要到哪去to 从哪来from if(to.path==="/home"||to.path==="/about"){if(localStorage.getItem('user')){next()//调用next才会往下走}}else{alert("无权限")}
})
export default router
上面这种方法只适合做简单的路由处理,如果是项目中的路由权限判断,推荐使用路由原信息
这种方式:
路由原信息:
router中提供的一个路由配置项meta,里面可以自定义任意信息,自定义的属性可以在路由地址和导航守卫中被访问到
- 配置路由时,给每一项加上一个属性,用来控制路由的权限
const routes = [{path: '/home',name: 'Home',component: Home,meta:{// 只有经过身份验证的用户才能访问isAuth: true}},{path: '/about',name: 'About',component: () => import('../views/About.vue'),meta:{// 任何人都可以访问此页面isAuth: false }}
]
- 权限验证
router.beforeEach((to,from,next)=>{//要到哪去to 从哪来from if(to.meta.isAuth){if(localStorage.getItem('user')){next()//调用next才会往下走}}else{alert("无权限")}
})
路由后置守卫afterEach
既然有前置路由守卫beforeEach
,当然也有后置路由守卫afterEach
,实际项目中用的并不多
afterEach
只有两个参数,to
和from
举个栗子:我们想实现这样一个功能,让网页标签的title,随着页面的改变而改变:
const routes = [{path: '/home',name: 'Home',component: Home,meta:{// 只有经过身份验证的用户才能访问isAuth: true,title:"首页"}},{path: '/about',name: 'About',component: About,meta:{// 任何人都可以访问此页面isAuth: false,title:"关于"},children:[{path: '/detail',name: 'Detail',component: Detail,meta:{// 任何人都可以访问此页面isAuth: false,title:"详情"},}]}
]
router.afterEach((to,from)=>{document.title = to.meta.title||'默认标题'
})
vue路由守卫beforeEach和afterEach相关推荐
- Vue路由守卫(导航守卫)及使用场景
目录 前言 一.路由守卫是什么? 二.路由守卫全解析 先来看一下钩子函数执行后输出的顺序吧 1.全局路由守卫 2.组件路由守卫 3.路由独享守卫 单独介绍一下路由守卫钩子三个参数 前言 最近在学习vu ...
- Vue路由守卫(导航守卫)
路由守卫包括全局守卫(beforeEach()).路由独享守卫(beforeEnter()).组件内守卫(beforeRouteEnter().beforeRouteLeave()) 1.全局守卫(b ...
- reactrouter4路由钩子_react router @4 和 vue路由 详解(八)vue路由守卫
13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据from和to来判断是哪个路由触发) const router = new VueRouter({ ... }) ...
- vue路由守卫死循环及next原理解释
在使用vue路由守卫的beforeEach方法时可能会出现无限递归,也就是死循环的问题,根本原因在于next()方法在不合适的地方错误调用所致,先来看一下官方对next()方法的解释: befor ...
- VUE路由守卫_前端实现权限验证
VUE路由守卫_权限验证 引言: 本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫:未登录时会限制访问某些页面(前台控制),与之前的Shiro不同: 文章目录 VUE路由 ...
- vue路由守卫中next方法的理解
vue路由守卫中next方法的理解 在网上看到了一篇通俗易懂的文章,此文章出处 在这里我用通俗点的说法解释上next(),next(false),next('/'),next(error),希望通过这 ...
- vue路由守卫有哪三种类型
vue中路由守卫一共有三种,分别为:全局路由守卫(全局前置守卫.全局后置守卫),组件内路由守卫,路由独享守卫(是在路由配置页面单独给路由配置的一个守卫). 路由守卫,也可以是路由拦截,我们可以通过路由 ...
- VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明
最近因为next()遇到了不少问题,在这里记录一下 首先是路由守卫,是不是感觉简简单单 beforeEach((to, from, next) => {to // 要去的路由from // 当前 ...
- vue路由守卫的使用
使用路由守位我们需要使用vuex来存放全局的用户信息 ①存在全局用户信息 1.首先展示我的项目路径 2.store/index.js文件内容如下: 这里主要是引入一些文件,以及进行挂载 import ...
最新文章
- 【Codeforces】158B-Taxi(贪心,怎么贪咧)
- [转载zz] Python3 输入和输出之序列化与反序列化
- 深入理解java虚拟机---读后笔记(垃圾回收)
- Java之JVM 优化经验总结
- Leetcode 88. 合并两个有序数组 解题思路及C++实现
- 返回index.html页面
- 对话RTP作者Ron Frederick: 我非常期待QUIC的发展
- 机器学习实战(十)利用K-means算法对未标注数据分组
- LeetCode 263. 丑数 264. 丑数 II(DP)
- php文本框输入内容过滤,为什么没能过滤掉文本框输入的所有反斜杠?
- Eclipse中@author的修改
- 非负矩阵分解 NMF(Non-negative Matrix Factorization )
- 删除数据库中的所有表
- linux 声卡驱动测试,Linux声卡驱动移植和测试
- 微信获取openid的时候报40163错的原因
- Openbravo中文使用手册
- 做技术应该持有什么样的工作态度?
- vue引入html报错
- VUE项目前端页面添加水印
- 【编译原理】最小化 DFA
热门文章
- OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习(上)
- oracle ORA-22992问题
- 证明求最短路径问题具有最优子结构(动态规划)
- [Vue.js] 一篇超级长的笔记,给《Vue.js 实战》划个重点
- 安卓AsyncTask
- java 多阶矩阵求逆_求N阶矩阵的逆矩阵 java
- Android开发5年,怎么样通过自学拿到40W年薪的?,安卓面试题最新2020
- 【手机下载Linux】
- anacoda里面安装包显示失败_Revit问题-运行库安装错误导致软件安装失败
- 软件工程师资格认证,你合格吗?