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 导航守卫的更多相关文章

  1. Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解

    Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...

  2. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

  3. vue 导航守卫,验证是否登录

    路由跳转前,可以用导航守卫判断是否登录,如果登录了就正常跳转,没有登录就把路由指向登录页面. router.beforeEach((to, from, next) => { const next ...

  4. [Vue]导航守卫:全局的、单个路由独享的、组件级的

    正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...

  5. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  6. Vue的路由动态重定向和导航守卫

    一.重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', ...

  7. Vue(7)- vue-cookies、极验滑动验证geetest、vue-router的导航守卫

    一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...

  8. vue之生命周期与导航守卫

    组件钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有两个特殊 ...

  9. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

随机推荐

  1. 数据分析 - Power BI 链接 mysql 数据分析

    链接数据库 点击确定后选择数据库, 然后输入用户名密码, 选择级别选择指定的数据库即可 之后弹出的导航器中即可有可预览的数据 更加推荐使用 再链接数据库的时候高级查询的 sql 中进行 sql 的执行 ...

  2. Python查询Mysql时返回字典结构的代码

    Python查询Mysql时返回字典结构的代码 MySQLdb默认查询结果都是返回tuple,输出时候不是很方便,必须按照0,1这样读取,无意中在网上找到简单的修改方法,就是传递一个cursors.D ...

  3. phpcms前台无法退出无法清除cookie

    phpcms前台无法退出无法清除cookie 如果caches\configs\system.php 中的cookie_path 设置为空..就会出现退不出的情况..设置为'cookie_path' ...

  4. .Netcore 2.0 Ocelot Api网关教程(8)- 缓存

    Ocelot中使用 CacheManager 来支持缓存,官方文档中强烈建议使用该包作为缓存工具.以下介绍通过使用CacheManager来实现Ocelot缓存. 1.通过Nuget添加 Ocelot ...

  5. Vue触发隐藏input file的方法

    1.使用input透明覆盖法 将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change ...

  6. python字典中添加项

    body_daily_close = { "mappings": { "properties": { "trade_date": { &qu ...

  7. codevs 1200:同余方程

    题目描述 Description 求关于 x 同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入描述 Input Description 输入只有一行,包含两个正整数 a, b,用 一个 空 ...

  8. 远程桌面teamviewer

    1.同一局域网 windows:远程桌面 2.需穿过局域网 teamviewer (1)使用 http://jingyan.baidu.com/article/ff4116259af07d12e482 ...

  9. QEMU编译安装

    QEMU是一个支持跨平台虚拟化的虚拟机,有user mode和system mode两种配置方式.其中qemu在system mode配置下模拟出整个计算机,可以在qemu之上运行一个操作系统.QEM ...

  10. PYTHON 100days学习笔记008-3:输入和输出

    目录 Day008-03:Python3 输入和输出 1.输出格式美化 1.1 str.format()用法 1.2 旧式字符串格式化 2.读取键盘输入 3.读和写文件 4.文件对象的方法 4.1 f ...