在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统一添加公共参数的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决
这篇文章主要介绍了Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue嵌入本地iframe文件并获取某元素的值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue中关于element的el-image 图片预览功能增加一个下载按钮(操作方法)
这篇文章主要介绍了vue中关于element的el-image 图片预览功能增加一个下载按钮,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vscode下的vue文件格式化问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
Vue API中setup ref reactive函数使用教程
setup是用来写组合式api，内部的数据和方法需要通过return之后，模板才能使用。在之前vue2中，data返回的数据，可以直接进行双向绑定使用，如果我们把setup中数据类型直接双向绑定，发现变量并不能实时响应。接下来就详细看看它们的使用2022-12-12
获取路由详细内容信息是我们日常开发中经常会遇到的需求,下面这篇文章主要给大家介绍了关于vue获取路由详细内容信息的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue中props值的传递，在vue中父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染，这个正向的数据传递在vue组件中就是通过props来实现的，需要的朋友可以参考下2009-05-05
这篇文章主要介绍了vue如何通过插槽组件之间数据传递问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
最近项目中使用了vue3+vite开发一个App项,下面这篇文章主要给大家介绍了关于使用vite发布app存在的所有问题的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vant自定义二级菜单操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论