Vue全局前置守卫的应用教程

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()
  }
})

到此，就可以方便地实现链接参数上的透传~