vue.js router NavigationDuplicated for query changes

Question

My router in html is

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

Vue.js Code:

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

Even after adding :key="$route.fullPath" if i change the query in url i still get error

ERROR Message :

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

Any suggestion to allow query changes in url like ?id

Dominik Haas · Accepted Answer · 2019-10-25 15:05:19Z

3

For me it work when i created a new query Object and refilled it with existing and new parameters:

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

I think you've did the Object.assign() the wrong way around. 1. param is target, 2. param is the source

Try it like this:

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

answered Oct 25, 2019 at 15:05

Dominik Haas

3114 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Julien Le Coupanec Over a year ago

Thank you! You can also do const query = { ...this.$route.query }

Collectives™ on Stack Overflow

vue.js router NavigationDuplicated for query changes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related