VUE3中webpack-merge插件动态修改路由参数

1. 背景

初始调用接口新创建一个应用，它没有定义任何流程，其流程workflowId初始为null，但是进入流程图页面编辑保存后，就会自动生成一个workflowId，此时需要同步路由中的query传递过来的workflowId参数

2. webpack-merge插件实现

步骤：

1. 安装webpack-merge：npm install --save webpack-merge
2. father.vue路由跳转且传参

router.push({
    path: `/agent/pods/${row.workflowId}/vueFlow`,   
    query: {
      name: row.name,
    }
  })

3. child.vue使用
   • 通过query传递的参数，route.query能读取到；
   • 通过path传递的参数，route.params才能读取到；

import { merge } from 'webpack-merge'

router.push({
	let newVal = ..... //已计算
    params: merge(route.params, { workflowId: newVal })   //路由参数会动态修改，query同理
})