您现在的位置是:首页 > Javascript
当前栏目
vue路由守卫(回顾)
2023-02-25 18:20:37 时间
路由守卫
路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫(navigation-guards)。官方定义:导航守卫(navigation-guards)。 文档地址:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
一、全局前置守卫beforEach
1. 守卫方法接收三个参数:
to:即将要进入的目标路由对象
from:当前导航正要离开的路由
next:执行下一步
/**
* @param {to} 将要去的路由
* @param {from} 出发的路由
* @param {next} 执行下一步
*/
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '卖座电影';
if (to.meta.needLogin && !$store.state.isLogin) {
next({
path: '/login'
})
} else {
next()
}
})
二、全局后置钩子afterEach
全局后置钩子与全局前置守卫类似,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身
router.afterEach((to, from) => {
// ...
})
三、路由独享的守卫beforeEnter
1. 使用方法与全局守卫相同
2. 不同的是:全局守卫可以作用于全局,路由独享守卫只作用于被设置守卫的路由
//登录模块
path: '/login',
component: () => import('@/views/login'),
beforeEnter: (to, from, next) => {
if (to.meta.needLogin && !$store.state.isLogin) {
next({
path: '/login'
})
} else {
next()
}
}
四、组件内的守卫
可以在路由组件内直接定义以下路由导航守卫:
1. beforeRouteEnter
① 在渲染该组件的对应路由被 confirm 前调用
② 不能 获取组件实例 this
,因为当守卫执行前,组件实例还没被创建
③ 可以通过 next 获取data中的数据
data() {
return {
name: "Grayly"
};
},
beforeRouteEnter: (to, from, next) => {
next(vm => {
alert("hello" + vm.name);
})
},
2. beforeRouteUpdate
这个方法是vue-router2.2版本加上的。因为原来的版本中,如果一个在两个子路由之间跳转,是不触发beforeRouteLeave的。这会导致某些重置操作,没地方触发。在之前,我们都是用watch 的。但是通过这个勾子,我们有了更好的方式。
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
3. beforeRouteLeave
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
可以访问组件实例 this
beforeRouteLeave: (to, from, next) => {
if (confirm("你确定要离开吗") == true) {
next();
} else {
next(false);
}
},
返回上一级路由
第一种:history.back();
第二种:this.$router.go(-1);
相关文章
- JS 当中的函数柯里化和高阶函数
- 数据提取-JsonPath
- Selenium与PhantomJS
- 数据提取-PyQuery
- package.json中script的生命周期
- JavaScript反爬之哈希算法
- 性能调优命令之jstat
- 性能调优命令之jstack
- 基于docker Jenkins搭建持续集成自动化测试环境,管理、配置、运行 Node 节点与 Slave 分布式运行
- selenium Webdriver自动化测试之执行JavaScript脚本
- Python3.x:Selenium+PhantomJS爬取带Ajax、Js的网页及获取JS返回值
- HTML基础之JS
- Python装饰器、生成器、内置函数、json
- 实现我博客旁边的线条效果 html canvas-nest.js 源码
- 陪你去看 Lodash.js 起步
- 数字格式化的 js 库
- 内网 Ubuntu 20.04 搭建 docusaurus 项目(或前端项目)的环境(mobaxterm、tigervnc、nfs、node)
- react实战系列 —— 起步(mockjs、第一个模块、docusaurus)
- 前端学习 node 快速入门 系列 —— 报名系统 - [express]
- 前端学习 node 快速入门 系列 —— 服务端渲染