Vue에서 URL 매개변수를 제거하는 방법

Vue.js는 대화형 웹 애플리케이션과 단일 페이지 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue.js 애플리케이션을 개발할 때 URL 매개변수를 처리해야 하는 경우가 많습니다.

Vue.js에서는 $route 객체를 사용하여 현재 URL의 매개변수를 포함하여 현재 경로에 대한 정보를 얻을 수 있습니다. 그러나 때로는 URL의 매개변수를 제거해야 하는 경우가 있습니다. 이 기사에서는 Vue.js에서 URL 매개변수를 제거하는 방법을 소개합니다.

URL 매개변수 가져오기

Vue.js에서는 $route 객체를 사용하여 URL의 매개변수를 포함하여 현재 경로에 대한 정보를 가져올 수 있습니다. $route 객체에는 많은 속성이 포함되어 있으며 그 중 params 속성에는 라우팅 매개변수가 포함되어 있습니다.

this.$route.params.id // 获取名为"id"的参数值

예를 들어 다음 경로에서:

path: '/users/:id'

다음 코드를 사용하여 "id"라는 매개변수 값을 가져올 수 있습니다.

this.$route.params.id // 获取名为"id"的参数值

URL 매개변수 제거

경우에 따라 현재 URL 매개변수. 그 목표를 달성하는 몇 가지 방법은 다음과 같습니다.

방법 1: $router.replace 메소드 사용

$router.replace 메소드를 사용하여 URL의 매개변수를 제거할 수 있습니다. 이 방법은 새 URL로 이동하는 데 사용되며 새 기록 레코드를 생성하지 않습니다.

this.$router.replace({ path: '/users', query: { page: null } })

위 코드에서는 "page"라는 매개변수를 지우기 위해 null을 사용했습니다. 매개변수를 전달하지 않고 /users 경로로 이동합니다.

방법 2: $router.push 방법을 사용하세요.

$router.push 방법은 $router.replace 방법과 유사하지만 새로운 기록 레코드를 생성합니다.

$router.push 메소드를 사용하면 특정 매개변수 없이 새 URL을 생성할 수 있습니다.

this.$router.push({ path: '/users', query: { page: null } })

위 코드에서는 "page"라는 매개변수를 지우기 위해 null을 사용했습니다. 매개변수를 전달하지 않고 /users 경로로 이동합니다.

방법 3: $route.replace 메서드를 사용하세요.

$route.replace 메서드는 새 URL로 이동하는 데 사용되지만 새 기록 레코드를 생성하지는 않습니다.

this.$route.replace({ path: '/users', query: { page: null } })

위 코드에서는 "page"라는 매개변수를 지우기 위해 null을 사용했습니다. 매개변수를 전달하지 않고 /users 경로로 이동합니다.

방법 4: $route.query 사용

$route.query를 사용하여 현재 URL의 매개변수에 액세스하고 그 안에 있는 특정 매개변수를 삭제할 수 있습니다.

const query = Object.assign({}, this.$route.query)
delete query.page
this.$router.replace({ path: '/users', query: query })

위 코드에서는 $route.query 속성의 복사본을 생성하기 위해 Object.sign 메서드를 사용했습니다. 그런 다음 삭제 메소드를 사용하여 "page"라는 매개변수를 삭제하고 $router.replace 메소드를 사용하여 업데이트된 URL을 브라우저로 탐색합니다.

결론

Vue.js에는 URL에서 매개변수를 제거하는 데 사용할 수 있는 여러 가지 방법이 있습니다. 이러한 메소드에는 $router.replace, $router.push, $route.replace 및 $route.query가 포함됩니다. 실제 필요에 따라 적절한 방법을 선택하면 URL 매개변수를 더 잘 처리할 수 있습니다.

위 내용은 Vue에서 URL 매개변수를 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!