问题引入
试想这样一个业务场景：
在用户输入数据，点击提交按钮后，这时发起了ajax请求，如果请求成功，
则跳转到详情页面并展示详情数据，失败则不跳转到详情页面，只是在当前页面给出错误消息。
难点所在
需要注意的是，这里并没有单独的接口用于判断用户是否通过校验，而是若用户通过校验，接口就直接返回了用户需要的详情信息，未通过校验则不会返回详情信息并报错。
常见方案问题分析
(一)用户点击按钮后直接跳转到详情页面，在详情页面的created钩子函数中发起ajax请求获取数据
问题在于：
若用户未通过校验，也会先跳转到详情页面，然后再报错，
而我们的目标是先判断是否成功，成功了再进行路由跳转。
(二)将详情页面写在弹窗中，不进行路由跳转。在当前页面发起请求，成功则在弹窗中展示详情数据，失败了则不展示弹窗
问题在于：
弹窗中的内容特别多的情况下，排版不容易，很容易难看，毕竟弹窗一般适用于展示少量数据 ，
并且产品的设计要求可能就是需要单独页面展示，不允许使用弹窗。
另外，如果路由和页面都已经写好了，再去写弹窗也会额外增加不少工作量
(三)发两次请求：当前页面发起第一次请求，失败了不进行跳转；成功了在详情页面再发起一次请求，获取详情数据
这种方式肯定可行，但是问题在于：
同一个api发送了两次请求，多发一次请求白白耗费了网络资源
(四)当前页面发起请求，失败了进行错误提示；成功了，则跳转到详情页面，并通过Vuex或者空组件实现非父子组件通信的方式将数据携带至详情页面展示
这种方式的问题在于：
Vuex的设计目标是存储系统各组件共用的状态，例如用户登录状态、菜单伸缩收起状态，
这里仅有两个组件，采用Vuex有种大炮打蚊子的感觉，使用空组件事件传值实现非父子组件通信
会略显繁琐。并且这两种方式加大了系统复杂度，也容易有新坑。
(五)浏览器缓存
不用说，更加繁琐了,也偏离更远了。
推荐解决方案：使用Vue Router的beforeRouteEnter路由导航守卫
(一)beforeRouteEnter简介：
它本质上，类似于Vue.js的生命周期钩子函数。它在新路由被确认前被调用，可以在里面进行数据处理，发起ajax获取数据，甚至是取消导航。当调用该守卫时，页面仍停留在原页面。该守卫执行完毕后(包括异步获取数据)，才会跳转到新页面。
(二)使用案例
在详情组件中使用beforeRouterEnter路由守卫：
import $axios from '@/libs/axios';
import api from '@/api';
export default {
name:'testComponent',
data(){
return {};
},
beforeRouteEnter(to, from, next) {
$axios
.get(api.GetQueueSettingDetail, {
params: {
waybillKey: to.params.pickCode,
warehouseType: 11
}
})
.then(resp => {
if (resp.success) {
next(vm => {
vm.carInfo = resp.result;
});
} else {
next(false);
}
})
.catch(() => {
next(false);
});
},
}
在以上案例中，在新路由被确认前，先发起ajax请求，若成功，就将数据赋值给该组件的carInfo，并跳转到新路由。若失败，调用next(false)回调函数取消导航，页面仍停留在原页面。
该方案相对来说，比较圆满的实现了开篇所提的业务需求，并且没有额外的开销。
(三)参数说明
三个参数
to 即将要进入的目标 路由对象
from 当前导航正要离开的路由
next 回调函数，一定要调用该方法来 resolve 这个钩子，可以在里面取消导航(next(false))或进行数据处理
(四) 注意事项
beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。因而上面示例中api和axios都采用了手动导入，没有使用this.axios或者this.api的方式。
访问组件实例的方式是，通过传一个回调给 next来访问组件实例，也不能使用this。在上面示例中，获取数据成功后，使用的是vm.carInfo而不是this.carInfo。
next(false)的作用是取消导航，这时，一切操作都停留在原页面，看起来就像什么也没发生一样。
iOS 多个异步网络请求全部返回后再执行具体逻辑的方法
对于dispatch多个异步操作后的同步方法,以前只看过dispatch_group_async,看看这个方法的说明: * @discussion * Submits a block to a dis ...
每日技术总结：vue router传参方式，js获取设备高度
今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...
mssql sqlserver 使用sql脚本获取群组后，按时间排序(asc)第一条数据的方法分享
摘要: 下文讲述使用sql脚本,获取群组后记录的第一条数据业务场景说明: 学校教务处要求统计: 每次作业,最早提交的学生名单下文通过举例的方式,记录此次脚本编写方法,方便以后备查,如下所示: 实现思路 ...
vue router 导航守卫生命周期
导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$r ...
AJAX获取数据成功后的返回数据如何声明成全局变量
var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=se ...
使用Promise发送多个异步请求, 全部完成后再执行
const datas = idList .map(id => url+'/id') .map(url => fetch(url).then(res => res.json())); ...
postman 获取登录成功后存在在header中cookies，并在下一个接口中使用。
1.首先登录成功 2.在tests中添加脚本 3.添加环境变量 4.配置环境变量和引用值 5.请求第二个接口成功
vue+elementui搭建后台管理界面(8 同步/异步获取数据渲染table)
elementui已经封装好了 el-table 组件,只需要指定 data 数据源即可,因此通常在 vue 实例生命周期的 created 阶段,从数据库获取数据,再将返回的数据绑定到 data 如 ...
随机推荐
.net登录的一般模式
思路: 1.检查登录: private string CheckLogin(HttpContext context) { Model.TUser model = (Model.TUser)contex ...
2016-2017-1 《信息安全系统设计基础》 学生博客及Git@OSC 链接
2016-2017-1 学生博客及Git@OSC 链接 博客 1452 20145201李子璇 20145202马 超 20145203盖泽双 20145204张 ...
iOS 滑动隐藏导航栏-三种方式
/** 1隐藏导航栏-简单- */ self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...
udp-->;socket通信原理
UDP数据通讯原理 UDP数据通讯分服务端(软件)和客户端端: 服务端(软件)(服务器)先运行,服务端,不需要事先知道客户端IP和port 客户端(软件)(客户端机器)后运行, ...
第二百五十一天 how can I 坚持
hadoop,namenote和datanode.namenode如果要是在启动时加载到内存,会不会对内存的要求比较高呢. edits-->fsimage. secondnamenode,那么n ...
UITabBarController 标签栏控制器
接上篇导航控制器UINavigationController 接下来是UITabBarController 标签栏控制器 先来看一下UITabBarController的结构 从图上可以看出控制器分为 ...
GDAL坐标转换
一.引言 最近研究了一下GIS.测绘学的坐标转换的问题,感觉大部分资料专业性太强,上来就是一通专业性论述:但感觉对于相关从业者来说,其实不必了解那么多背景知识的:就通过GDAL这个工具,来简单总结下坐 ...
CodeForces 589F-Gourmet and Banquet-二分答案
有m盘菜,每盘有一个开始时间和结束时间,必须每盘都吃同样的时间.问最多能吃多久. 二分答案,然后用一个优先队列维护当前时间内的菜,然后每次都吃结束时间最小的那盘. #include
spark新闻项目环境搭建
前面安装好三节点的centos 6.5 和配置好静态ip,这里就不多说了 创建kfk用户,然后重启 Last login: Fri Jan :: from 192.168.86.1 [spark@sp ...
撩课-Web大前端每天5道面试题-Day24
1.下面的代码将输出什么? ; i < ; i++) { setTimeout(function() { console.log(i); }, i * ); } 闭包在这里能起什么作用? 上面的 ...
2168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
