vue 导航守卫
1、全局守卫(在所有路由展示前触发)//在main.js中
router.beforeEach((to, from, next) => {
to 即将要进入的到的路由,值为路由
from 离开的路由(从哪个路由离开),值为路由
next 值为函数,这个函数决定你接下来要展示的路由页面
})
router.beforeEach((to, from, next) => {
if(to.path==='/login'){
next();
}else{
alert('你还没登录,请登录');
next('/login');
}
});
在页面点击时,会先询问,然后跳转。
2、后置钩子(在所有路由展示后触发)//在main.js中
router.afterEach((to,from)=>{
to 即将要进入的到的路由,值为路由
from 离开的路由(从哪个路由离开),值为路由
});
router.afterEach((to, from) => {
alert('我是后置钩子')
})
3、路由独享的守卫(在当前路由展示前触发)//在router.js
beforeEnter(to, from, next){ //在路由内部使用
to 即将要进入的到的路由,值为路由
from 离开的路由(从哪个路由离开),值为路由
next 值为函数,这个函数决定你接下来要展示的路由页面
};
beforeEnter(to,from,next){
alert('非登录状态下无法管理,请登录');
next('/login');
}
4、组件内的守卫
beforeRouteEnter(to, from, next){ //在路由组件内使用
//在当前路由被展示前调用
};
beforeRouteUpdate(to, from, next){ //在路由组件内使用
//在当前路改变时调用
};
beforeRouteLeave(to, from, next){ //在路由组件内使用
//在离开当前路时调用
};
beforeRouteEnter(to, from, next){ //在路由组件内使用
//在当前路由被展示前调用
//alert('你好!');
//alert(this.name); //报错,beforeRouteEnter不能够访问到this对象,因为守卫触发时组件还没有被创建
next(vm=>{
alert(vm.name);
});
},
离开页面时调用
beforeRouteLeave (to, from, next) {
// 在离开当前路由时调用
const answer=confirm('你确定要离开么?')
if(answer){
next();
}else{
next(false);
}
}
vue 导航守卫的更多相关文章
- Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解
Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...
- vue导航守卫和axios拦截器的区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...
- vue 导航守卫,验证是否登录
路由跳转前,可以用导航守卫判断是否登录,如果登录了就正常跳转,没有登录就把路由指向登录页面. router.beforeEach((to, from, next) => { const next ...
- [Vue]导航守卫:全局的、单个路由独享的、组件级的
正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- Vue的路由动态重定向和导航守卫
一.重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', ...
- Vue(7)- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...
- vue之生命周期与导航守卫
组件钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有两个特殊 ...
- vue进阶:vue-router之导航守卫、路由元信息、路由懒加载
1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...
随机推荐
- 数据分析 - Power BI 链接 mysql 数据分析
链接数据库 点击确定后选择数据库, 然后输入用户名密码, 选择级别选择指定的数据库即可 之后弹出的导航器中即可有可预览的数据 更加推荐使用 再链接数据库的时候高级查询的 sql 中进行 sql 的执行 ...
- Python查询Mysql时返回字典结构的代码
Python查询Mysql时返回字典结构的代码 MySQLdb默认查询结果都是返回tuple,输出时候不是很方便,必须按照0,1这样读取,无意中在网上找到简单的修改方法,就是传递一个cursors.D ...
- phpcms前台无法退出无法清除cookie
phpcms前台无法退出无法清除cookie 如果caches\configs\system.php 中的cookie_path 设置为空..就会出现退不出的情况..设置为'cookie_path' ...
- .Netcore 2.0 Ocelot Api网关教程(8)- 缓存
Ocelot中使用 CacheManager 来支持缓存,官方文档中强烈建议使用该包作为缓存工具.以下介绍通过使用CacheManager来实现Ocelot缓存. 1.通过Nuget添加 Ocelot ...
- Vue触发隐藏input file的方法
1.使用input透明覆盖法 将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change ...
- python字典中添加项
body_daily_close = { "mappings": { "properties": { "trade_date": { &qu ...
- codevs 1200:同余方程
题目描述 Description 求关于 x 同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入描述 Input Description 输入只有一行,包含两个正整数 a, b,用 一个 空 ...
- 远程桌面teamviewer
1.同一局域网 windows:远程桌面 2.需穿过局域网 teamviewer (1)使用 http://jingyan.baidu.com/article/ff4116259af07d12e482 ...
- QEMU编译安装
QEMU是一个支持跨平台虚拟化的虚拟机,有user mode和system mode两种配置方式.其中qemu在system mode配置下模拟出整个计算机,可以在qemu之上运行一个操作系统.QEM ...
- PYTHON 100days学习笔记008-3:输入和输出
目录 Day008-03:Python3 输入和输出 1.输出格式美化 1.1 str.format()用法 1.2 旧式字符串格式化 2.读取键盘输入 3.读和写文件 4.文件对象的方法 4.1 f ...