vue全局query（vue-router函数拦截）

     有时候我们需要在每个页面的跳转中传入固定的参数，但是又需要混入其他的参数。在vue-router中没有提供这样的api，这时候我们可以使用函数拦截的方式，改写vue-router的router.history.transitionTo的方法，将我们需要混入的全局参数注入vue-router中。

1.第一步

新建global-query.js文件，然后在mian.js文件中引入

// main.js
import 'global-query.js'

2.第二步

在global-query.js中编写我们的vue-router函数拦截核心代码

// global-query.js
import router from '../router'

const query = { params: "globalQuery" }  //需要mixin的全局query
const transitionTo = router.history.transitionTo

//mixin global query
router.history.transitionTo = function (location, onComplete, onAbort) {
    location = typeof location === 'object'
        ? { ...location, query: { ...location.query, ...query } }
        : { path: location, query }
    transitionTo.call(router.history, location, onComplete, onAbort)
}

通过上面两步的操作后，我们可以在vue中这样使用:

export default {
	methods:{
    	jump(){
        	// 参数将会变成 { params: "globalQuery", firstParams:abc }
        	this.$router.push({ name: "target_route",
            	query: { firstParams:abc }
            })
        }
    }
}