文章/答案/技术大牛

发布

社区首页 >问答首页 >用于查询更改的vue.js路由器NavigationDuplicated

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

Stack Overflow用户

提问于 2019-10-02 19:59:49

回答 1查看 3.4K关注 0票数 3

我的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

vue-router

vue.js

vuejs2

回答 1

Stack Overflow用户

发布于 2019-10-25 23:05:19

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

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. param是目标，2. param是源

像这样试一下：

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58201062

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于查询更改的vue.js路由器NavigationDuplicatedEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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