vue.js 라우터 탐색 쿼리 변경에 대해 중복됨

vue.js 라우터 탐색 쿼리 변경에 대해 중복됨

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와 같은 쿼리 변경을 허용하는 제안

새로운 쿼리 오브젝트를 생성하여 기존 파라미터와 새로운 파라미터로 리필하면 동작합니다.

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

언급URL : https://stackoverflow.com/questions/58201062/vue-js-router-navigationduplicated-for-query-changes