vue关于导航守卫的几种应用场景
beforeEach
该钩子函数主要用来做权限的管理认证
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
beforeRouteUpdate
路由参数改变时触发这个钩子,例如从/foo/1
和 /foo/2
之间跳转的时候需要重新请求数据,这种类型的跳转不会触发created生命周期函数,可以通过该钩子函数或者监听$route来实现
<template>
<div>
{{ count }}
<button @click="goRoute">跳转路由</button>
</div>
</template>
<script>
export default {
name: "foo",
data() {
return {
count: 0,
};
},
created() {
console.log("id改变了");
this.getData();
},
beforeRouteUpdate(to, from, next) {
this.getData();
next();
},
methods: {
goRoute() {
this.$router.push({
name: "foo",
params: {
id: Math.floor(Math.random() * 10),
},
});
},
getData() {
setTimeout(() => {
this.count = this.$route.params.id * 2;
}, 500);
},
},
};
</script>
beforeRouteLeave
用户未保存当前的内容就准备跳转,离开当前路由,可以通过该钩子弹出一个提示窗口
beforeRouteLeave (to, from, next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
vue关于导航守卫的几种应用场景的更多相关文章
- vue router 导航守卫生命周期
导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$r ...
- vue路由导航守卫及前置后置钩子函数参数详解
首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWo ...
- Vue之七导航守卫
{ path:'/',component:Recommend,beforeEnter: (to, from, next) => { console.log(to); ajax('get','/a ...
- vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )
导航守卫 一.全局导航守卫 1. 全局导航守卫,把方法给 router,只要路由发生改变跳转都会触发这个函数 2. 每个路由 都有一个 meta 3. 全局导航守卫分两种: 1. 全局前置导航守卫:路 ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- vue导航守卫和axios拦截器的区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...
- Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)
Vue总结第五天:vue-router ✿ 路由(器)目录: □ vue中路由作用 □ vue-router基本使用 □ vue-router嵌套路由 □ vue-router参数传递 □ ...
- 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 ...
随机推荐
- 2019牛客暑期多校训练营(第一场)I Points Division(dp+线段树优化)
给你n个点,第i个点在的位置为(xi,yi),有两个属性值(ai,bi).现在让你把这n个点划分为A和B两个部分,使得最后不存在i∈A和j∈B,使得xi>=xj且yi<=yj.然后对于所有 ...
- AtCoder Beginner Contest 182 D - Wandering (前缀和)
题意:在\(x\)轴上,你刚开始在\(0\)的位置,第\(i\)次操作需要走\(A_1,...,A_i\)个单位,如果\(A_i\)为正向右走,否则向左走,求你所能走到的最大坐标. 题解:我们一步一步 ...
- 牛客53680 「金」点石成金 (dfs)
题意:给你\(n\)组数,每组4个正整数\(a,b,c,d\),每组数有两个选择: 1.增加\(a\)个财富,消耗\(b\)点魔法. 2.回复\(c\)点魔法,减少\(a\)个财富. 求最后财 ...
- C# 静态类 单例模式 对比
公司的类都需要使用单例模式实现,这个可以节省资源,避免重复对象的生成.但是静态类也可以做到这一点,而且写起来更简洁,于是查阅相关资料,希望弄明白两者的差别. 1.单例模式可以在用到的时候初始化,而静态 ...
- [备忘] DevOps 工具上的准备清单(不断补充中……)
目录 概念 发展历程 工具清单 规划 概念 从字面上来看,"DevOps"一词是由英文 Development(开发)和 Operations (运维)组合而成,但它所代表的理念和 ...
- 2018大都会赛 A Fruit Ninja【随机数】
题目链接:戳这里 题意:一个平面里有n个点,问存不存在一条直线上有m个点,满足m >= n*x. 解题思路:0<x<1,且x小数点后只有1位,也就是说10*m > n.假设存在 ...
- 杭电多校HDU 6601 Keen On Everything But Triangle(主席树)题解
题意: 有\(n\)根长度不一的棍子,q次询问,求\([L,R]\)区间的棍子所能组成的周长最长的三角形.棍长\(\in [1, 1e9]\),n\(\in [1, 1e5]\). 思路: 由于不构成 ...
- Apple Watch Series 6 屏幕误触放大后无法还原问题和解决方案
Apple Watch Series 6 屏幕误触放大后无法还原问题和解决方案 shit Apple,只能放大,不能缩小! 解决方案 关闭缩放功能 https://support.apple.com/ ...
- 微信公众号 webfullstack
微信公众号 webfullstack weixin refs https://mp.weixin.qq.com/cgi-bin/loginpage?t=wxm2-login&lang=zh_C ...
- 增强 CT & CT & MR
增强 CT & CT & MR CTA,增强 CT Computed Tomography (CT) CT 计算机断层扫描 Computed Tomography (CT) Angio ...