有时候我们需要在每个页面的跳转中传入固定的参数,但是又需要混入其他的参数。在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 }
})
}
}
}