VUEJS-url에서 매개 변수를 제거하는 방법

VUEJS-url에서 매개 변수를 제거하는 방법

url에 여러 개의 파라미터가 있습니다.다음 코드로 url에 새로운 파라미터를 추가합니다.

this.$router.push({query: Object.assign({}, this.$route.query, {cities: '1,45'})});

그러나 도시를 선택 해제해도 마지막 ID는 city param과 함께 url에 남습니다.

projects#/?cities=2189673&gender=male&range=100

실제로는 citys 파라미터만 삭제합니다.어떻게 해야 할까?

url의 모든 param을 php에 게시하려면 어떻게 해야 합니까?

서드파티 라이브러리로 중계되기 때문에 이것이 최선의 해결책이 아니라는 것을 알고 있습니다.

Lodash는 데이터 수집을 관리하는 일련의 기능입니다.

의 쿼리 파라미터를 URL에서 제거하려면 Lodash를 사용하여 다음을 수행할 수 있습니다.

// remove a param from $route.query
var newRouteQuery = _.omit(this.$route.query, 's');
this.$router.replace( { query: newRouteQuery } );

_.omit() Lodash 함수는 첫 번째 인수로 개체를 사용하고 두 번째 인수에 나열된 항목을 제외하고 동일한 개체를 반환합니다.이 경우 문자열은 두 번째 인수(문자열 s)로만 전달되므로 함수는 개체의 인덱스를 하나만 생략합니다.

이 기능의 바닐라 자바스크립트 실장은 다음과 같습니다(주의: 웹 팩을 사용하지 않을 경우 유의하십시오).

// Omit 's' from vue router query params
var newRouteQuery = {};
Object.keys(this.$route.query).forEach(function(key){
    if (key != 's')
        newRouteQuery[key] = this.$route.query[key];
});

이 모든 파라미터를 PHP에 전달하려면 기본적으로 요청을 전송하기 위한 Ajax API가 필요합니다.의 내용을 전달할 수 있습니다.this.$route.queryPOST, GET 또는 기타 방법으로 서버에 접속합니다.

Fetch API(추가 라이브러리가 필요 없고 브라우저 지원이 거의 완료됨)를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

return fetch('/process.php', {
    method: 'POST',
    cache: 'no-cache', // don't cache the response
    credentials: 'omit', // don't send cookies
    body: JSON.stringify(this.$route.query)
})
.then(function(response){
    // ...

이 경우 요청 본문에 데이터를 JSON 문자열로 POST 요청을 보냅니다.데이터 전송 방법 및 요청 유형에는 여러 가지가 있습니다.PHP 환경과 JS 환경에 가장 적합한 방법을 조사해야 합니다(이미 Ajax 라이브러리를 로드하고 있을 수 있습니다).

하나의 옵션은 vuex를 사용하여 제공된 Store - State에 도시를 저장하는 것입니다.그런 다음 여기에 저장된 도시를 사용하여 관련 도시를 선택할 수 있습니다.

당신의 도시는 vuex 스토어에 저장되기 때문에 당신이 php에 글을 올리고 싶을 때도 그 도시에 접속할 수 있습니다.이 작업을 수행하기 위해 스토어에 작업을 만들 수 있습니다.

문서 1은 웹에서 쉽게 찾을 수 있습니다.

Vuex 매뉴얼

Vue 3과 Vue Router 4를 사용하여 해결할 수 있었습니다.

간략하게 하기 위해 쿼리 파라미터를 추가하면 다음과 같이 됩니다.

router.push({ name: 'Search', query: { 'q': searchCriteria.value } });

그런 다음 (내 경우) 모든 파라미터를 클리어하려면 1개만 가지고 있습니다.다음 절차를 수행합니다.

router.push({ name: 'Search' });

다음과 같은 다른 매개 변수가 있는 경우:

router.push({ name: 'Search', query: { 'q': searchCriteria.value, 'b': 'Another' } });

다음과 같이 할 수 있습니다(테스트는 하지 않았습니다).

router.push({ name: 'Search', query: { 'b': 'Another' } });

언급URL : https://stackoverflow.com/questions/48700584/vuejs-how-to-remove-parameter-from-url