前概:我们经常遇到需要将参数带在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()
}
})
到此,就可以方便地实现链接参数上的透传~