vue 动态更改路由参数

需求描述

要求点击 地区下拉，动态更改 路由的name和id参数。

效果图

实现步骤

1. 安装依赖

   npm install webpack-merge
   

2. 在main.js 文件中注册 merge

   //动态更改路由参数
   import merge from 'webpack-merge';
   Vue.prototype.$merge = merge
   

3. 在需要的页面使用该功能

    let name = data.name;
    let id = data.AreaId;
    //判断是否重复点击地区，避免报错
     if (this.$route.query.name === name) {
       return;
     }
     //更改路由的参数信息
     this.$router.push({
       query: this.$merge(this.$route.query, { name, id })
     });