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

猜你喜欢

转载自blog.csdn.net/weixin_50096821/article/details/123537483