Vue에서 점프 경로 매개변수를 얻는 방법

Vue에서 라우팅할 때 매개변수를 전달해야 하는 경우가 많습니다. 그렇다면 대상 페이지에 전달된 매개변수를 얻는 방법은 무엇입니까? 이 기사에서는 Vue에서 점프 경로 매개변수를 얻는 방법을 소개합니다.

Vue에서 경로를 점프하는 방법에는 두 가지가 있습니다. vue-router 플러그인을 사용하거나 페이지에서 직접 window.location.href를 사용하여 점프하세요. 어느 쪽이든 점프 경로 매개변수를 얻는 방법은 비슷합니다.

루트 점프에 vue-router 플러그인 사용

vue-router는 Vue에서 제공하는 공식 라우팅 플러그인으로, Vue에서 라우팅을 제어하는 ​​데 도움이 됩니다. vue-router에서는 점프 경로 매개변수를 포함한 현재 라우팅 정보를 $route 객체를 통해 얻을 수 있습니다.

다음과 같은 라우팅 구성이 있다고 가정합니다.

{
  path: '/detail/:id',
  component: Detail
}

여기서 :id는 라우팅을 통해 전달될 수 있는 경로 매개변수임을 나타냅니다. 예를 들어 /detail/123은 ID가 123인 세부정보 페이지를 나타냅니다.

대상 페이지 Detail에서 $route.params를 통해 전달된 매개변수를 얻을 수 있습니다. 코드는 다음과 같습니다.

export default {
  name: 'Detail',
  mounted() {
    const id = this.$route.params.id; // 获取跳转路径参数id的值
    console.log('id:', id);
  }
};

마운트된 Hook에서는 this.$route.params.id를 통해 점프 경로에 전달된 id 매개변수를 얻을 수 있습니다.

경로 점프를 위해 페이지에서 window.location.href를 직접 사용하세요

Vue에서는 페이지 점프를 위해 window.location.href를 직접 사용할 수도 있습니다. 예:

window.location.href = '/detail?id=123';

여기서 id 매개변수를 점프 URL에 연결했습니다. 대상 페이지에서 이 매개변수를 가져오는 방법을 살펴보겠습니다.

location.search를 사용하여 점프 경로에서 물음표 뒤의 매개변수 부분을 가져온 다음 일반 일치를 사용하여 필요한 매개변수 값을 가져올 수 있습니다. 코드는 다음과 같습니다.

export default {
  name: 'Detail',
  mounted() {
    const query = location.search.substring(1); // 获取跳转路径参数字符串，去掉问号
    const reg = new RegExp(`(^|&)id=([^&]*)(&|$)`); // 匹配id参数的正则表达式
    const id = query.match(reg)[2]; // 获取跳转路径参数id的值
    console.log('id:', id);
  }
};

위 코드는 정규식을 통해 id 매개변수의 값을 일치시켜 변수 id에 저장합니다.

요약

Vue에서 점프 경로 매개변수를 얻는 방법은 매우 간단합니다. vue-router 플러그인을 사용하든 window.location.href를 직접 사용하여 점프하든 $route 또는 위치와 같은 개체를 사용할 수 있습니다. 전달된 매개변수를 얻습니다. 이 기사에서는 두 가지 방법을 소개합니다. 개발자는 실제 상황에 따라 자신에게 적합한 방법을 선택할 수 있습니다.

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