我要评论vue全局前置守卫的应用1——参数透传
我们经常遇到需要将参数带在url进行后台请求这样的需求，笔者在项目中遇到需要一直使用某个参数进行请求，以获得相应的数据，实现方式不外乎两种：1.将这个参数变成全局变量 （借助store） 2.使用路由守卫将参数一直进行传递。方案1的缺点在于如果在中间的页面打开时，此时这个参数就不存在了，导致页面异常，故采用了方案2实现。
实现方法：
你可以使用router.beforeeach注册一个全局前置守卫，简化操作，否则需要在每次跳转时，进行参数的透传。
router.beforeeach((to, from, next) => {
//该路由方法，在每次路由发生变化时，进入到下一个路有前调用
//该方法需谨慎使用，不然很容易进入死循环哦
})
to: route: 即将要进入的目标路由对象 from: route: 当前导航正要离开的路由 next: function: 一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。 ---引自官方api
现在提供的思路是判断路由的参数中是否存在参数a，如果存在就在每次跳转时加上该参数a，如果没有直接next()来resolve钩子。
代码如下
router.beforeeach((to, from, next) => {
if (!('a' in to.query)) {
next(object.assign({}, to, { query: { a: geturlparam('a') } }) )
//geturlparam 为自己所写的获取链接上参数的方法
} else {
next()
}
})
到此，就可以方便地实现链接参数上的透传~
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论