有的时候我们可能有这样的需求,比如现在url为m.taoyuewenhua.com/#/ 我们需要在用户每次跳转路由的时候监控有没有abc这个参数. 如果有,后端要求我们在以后跳转任何url的时候,都要在url携带上这个参数.就变成m.taoyuewenhua.com/#/&abc=xxx;
这个参数称为"公共参数";
那么,我们该如何做呢?因为vue中有很多组件.在每个组件都写的话,太麻烦.所以这个时候,全局路由钩子登场了.分别是
router.beforeEach 全局导航前置守卫 路由跳转前执行
router.beforeResolve 全局导航解析守卫 vue2.5新增 导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后, 解析守卫就被调用
router.afterEach 全局导航后置守卫 路由跳转后执行
我们此次用到的是前置守卫.开始我用的是后置守卫.因为出现bug,也可能是本人技术不精.后又改为前置守卫.
代码如下:
router.beforeEach((to, from, next) => {
if (to.query.abc) {
next();
return;
};
if (from.query.abc) {
let toQuery = JSON.parse(JSON.stringify(to.query));
toQuery.abc = from.query.a