vue.js 路由器 NavigationDuplicated 用于查询更改

Question

我在html中的路由器是

  <div>
                <transition name="slide-fade">
                    <router-view :key="$route.fullPath"></router-view>
                </transition>
            </div>

Vue.js 代码：

this.$router.push({ path : this.$route.matched[0].path , query: Object.assign(this.$route.query, { id: r.jo }) }).then(function(o){
      console.error(o);
      this.showObj.mode='edit';
    }).catch(function(e){
      console.error(e);
      _this.onQueryChange({ newQuery : { id: r.jo }, replaceAll : false  });
      _this.showObj.mode='edit';
    });

即使在添加 :key="$route.fullPath" 之后，如果我更改 url 中的查询，我仍然会出错

错误消息：

NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/contest/fast?id=k0uwjji35741hb") is not allowed", stack: "Error↵    at new NavigationDuplicated (https://unp…lare.com/ajax/libs/vue/2.6.10/vue.min.js:6:11384)"}
message: "Navigating to current location ("/aa/bb?id=j3j3") is not allowed"
name: "NavigationDuplicated"
_name: "NavigationDuplicated"
stack: "Error↵    at new NavigationDuplicated (https://unpkg.com/vue-router/dist/vue-router.js:1980:16)↵    at HashHistory.confirmTransition (https://unpkg.com/vue-router/dist/vue-router.js:2096:20)↵    at HashHistory.transitionTo (https://unpkg.com/vue-router/dist/vue-router.js:2040:10)↵    at HashHistory.replace (https://unpkg.com/vue-router/dist/vue-router.js:2481:12)↵    at https://unpkg.com/vue-router/dist/vue-router.js:2798:24↵    at new Promise (<anonymous>)↵    at VueRouter.replace (https://unpkg.com/vue-router/dist/vue-router.js:2797:14)↵    at a.showDetails  

任何允许在 url 中更改查询的建议，例如 ?id

Answer 1

对我来说，当我创建一个新的查询对象并用现有的和新的参数重新填充它时它就起作用了：

additiveChangeRoute(basePath, search, tags, mode) {
  const query = {};
  Object.assign(query, this.$route.query);

  if (search !== undefined) {
    query.search = search;;
  }

  if (tags !== undefined) {
    query.tags = tags;
  }

  if (mode !== undefined) {
    query.mode = mode;
  }

  this.$router.push({
    path: basePath,
    query,
  });
},

我认为您以错误的方式执行了Object.assign()。 1. 参数为目标，2. 参数为源

试试这样：

const newQuery = {};
Object.assign(newQuery, this.$route.query);
newQuery.id = r.jo;

this.$router.push({ path: this.$route.matched[0].path , query: newQuery }).then(function(o){
      console.error(o);
      this.showObj.mode='edit';
    }).catch(function(e){
      console.error(e);
      _this.onQueryChange({ newQuery : { id: r.jo }, replaceAll : false  });
      _this.showObj.mode='edit';
    });