[javascript] Vue-Router를 사용하여 Vue에서 URL 쿼리 매개 변수를 설정하는 방법

다음은 문서의 예입니다.

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

참조 : https://router.vuejs.org/en/essentials/navigation.html

해당 문서에서 언급했듯이 다음 router.replace과 같이 작동합니다.router.push

따라서 문제의 샘플 코드에 올바르게 포함되어있는 것 같습니다. 그러나 라우터가 탐색 할 경로를 갖도록 name또는 path매개 변수도 포함해야 할 수도 있습니다 . 없이 name또는 path, 그것은 매우 의미있는 보이지 않는다.

이것은 현재 나의 이해입니다.

• query 라우터의 경우 선택 사항입니다. 뷰를 구성하는 구성 요소에 대한 몇 가지 추가 정보
• name또는 path필수-에 표시 할 구성 요소를 결정합니다 <router-view>.

샘플 코드에서 누락 된 것일 수 있습니다.

편집 : 주석 후 추가 세부 정보

이 경우 명명 된 경로 를 사용해 보셨습니까 ? 동적 경로가 있으며 매개 변수와 쿼리를 별도로 제공하는 것이 더 쉽습니다.

routes: [
    { name: 'user-view', path: '/user/:id', component: UserView },
    // other routes
]

그리고 당신의 방법에서 :

this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })

기술적으로 위와 사이에는 차이가 없지만 this.$router.replace({path: "/user/123", query:{q1: "q1"}})경로 문자열을 구성하는 것보다 명명 된 경로에 동적 매개 변수를 제공하는 것이 더 쉽습니다. 그러나 두 경우 모두 쿼리 매개 변수를 고려해야합니다. 두 경우 모두 쿼리 매개 변수가 처리되는 방식에서 잘못된 점을 찾을 수 없습니다.

경로 내부에있는 후에는 동적 매개 변수를로 가져오고 this.$route.params.id쿼리 매개 변수를 this.$route.query.q1.

답변

addParamsToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path +
      '?' +
      Object.keys(params)
        .map(key => {
          return (
            encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
          )
        })
        .join('&')
  )
}

this.$router.push({ query: Object.assign(this.$route.query, { new: 'param' }) })

  const query = Object.assign({}, this.$route.query);
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

  const query = this.$route.query;
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

  const { page, limit, ...otherParams } = this.$route.query;
  await this.$router.push(Object.assign({
    page: page,
    limit: rowsPerPage
  }, otherParams));
);

this.$router.push({ query: Object.assign({}, this.$route.query, { newKey: 'newValue' }) });

    setQuery(query){
        let obj = Object.assign({}, this.$route.query);

        Object.keys(query).forEach(key => {
            let value = query[key];
            if(value){
                obj[key] = value
            } else {
                delete obj[key]
            }
        })
        this.$router.replace({
            ...this.$router.currentRoute,
            query: obj
        })
    },

    removeQuery(queryNameArray){
        let obj = {}
        queryNameArray.forEach(key => {
            obj[key] = null
        })
        this.setQuery(obj)
    },