在vue中利用全局路由钩子给url统一添加公共参数的例子
有的时候我们可能有这样的需求,比如现在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.abc;
next({
path: to.path,
query: toQuery
})
} else {
next()
}
});
在这里解释一下: 前置守卫一定记得执行next方法.如果不执行,路由不会跳转.路由在跳转的时候,如果我们输出from和to.他们分别代表上一个路由和现在的路由.假如我们要从a调到b;也就是跳转的时候,我们马上获取b路由地址.并且判断此时b路由有没有abc这个参数.如果有就直接跳转过去,next方法执行.并且return;如果没有,然后如果a这个url有abc这个参数了,那么我们就把这个参数放到b的url上;并且next方法执行.携带上这个参数就行了. 最后,如果a没有这个参数 ,直接next方法执行.也就是说路由直接跳转过去,不做任何拦截。
还有一点需要提醒初学者.初学者刚用路由钩子容易遇到死循环.建议好好看一下路由钩子的执行机制.就不会遇到死循环了.有时间了说一下这个问题.
以上这篇在vue中利用全局路由钩子给url统一添加公共参数的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
解决vue.js出现Vue.js not detected错误的问题
这篇文章主要介绍了解决vue.js出现Vue.js not detected错误的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue中监听路由参数的变化,给大家介绍了vue中监听路由参数变化的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
很多时候使用vue开发的项目,由于无法在低版本浏览器上运行,所以需要解决下,下面这篇文章主要给大家介绍了关于vue对于低版本浏览器兼容问题的解决思路,需要的朋友可以参考下2023-02-02
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
这篇文章主要介绍了浅谈vue使用axios的回调函数中this不指向vue实例,为undefined，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
今天小编就为大家分享一篇Vue实现push数组并删除的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue3.0在子组件中触发的父组件函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue+vant 上传图片需要注意的地方，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了解决Vue项目中tff报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论