Vue 라우팅을 통해 주소 표시줄의 매개변수를 변경하는 방법

Vue는 개발자에게 편리한 많은 기능을 제공하는 매우 인기 있는 JavaScript 프레임워크입니다. 그 중 Vue Router는 Vue의 하위 모듈로, 뷰와 주소 간의 매핑 관계를 관리하는 역할을 담당합니다. Vue 라우팅을 사용하면 다양한 뷰를 다양한 URL 주소에 쉽게 매핑할 수 있습니다. 이 글에서는 Vue 라우팅을 통해 주소 표시줄의 매개변수를 변경하는 방법을 소개합니다.

1. Vue Router 설치

먼저 Vue Router를 설치해야 합니다. 터미널에서 다음 명령을 입력하여 설치합니다.

npm install vue-router --save

Yarn 패키지 관리자를 사용하는 경우 다음 명령을 사용하여 설치할 수 있습니다.

yarn add vue-router

2. Vue Router 인스턴스 만들기

응용 프로그램의 항목 파일에서, Vue Router 인스턴스를 생성해야 합니다. 다음은 기본 예입니다.

import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage,
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage,
    },
  ],
});

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
});

위 코드에서는 두 개의 경로를 정의합니다. '/'는 HomePage 구성 요소에 해당하고 '/about'은 AboutPage 구성 요소에 해당합니다. 두 경로 모두 코드에서 참조할 수 있는 이름이 있습니다.

3. 주소 표시줄 매개변수 변경

Vue Router에서는 라우팅 경로, 매개변수, 이름 등을 포함하여 $route 객체를 통해 현재 라우팅 정보를 얻을 수 있습니다. $route 객체를 사용하여 주소 표시줄의 매개변수를 변경할 수 있습니다. 예는 다음과 같습니다.

<script>
export default {
  methods: {
    changeParam() {
      this.$router.push({ name: 'about', params: { id: 1 } });
    },
  },
};
</script>

이 예에서는 $router.push 메소드를 사용하여 주소 표시줄의 매개변수를 변경하는changeParam이라는 메소드를 정의합니다. 이 메소드는 경로 이름과 매개변수가 포함된 객체를 매개변수로 받습니다. 이 예에서는 경로 이름을 'about'으로 설정하고 매개변수를 {id: 1}로 설정했습니다. 이는 'about' 경로로 점프하여 값이 1인 'id'라는 매개변수를 전달한다는 의미입니다.

4. 주소 표시줄 매개변수 가져오기

주소 표시줄의 매개변수를 변경하는 것 외에도 주소 표시줄의 매개변수를 가져올 수도 있습니다. 예는 다음과 같습니다.

<script>
export default {
  computed: {
    id() {
      return this.$route.params.id;
    },
  },
};
</script>

이 예에서는 id라는 계산 속성을 정의합니다. 이 계산된 속성에서는 $route.params.id를 사용하여 주소 표시줄에서 'id'라는 매개변수를 가져옵니다.

이 단계를 통해 주소 표시줄의 매개변수를 쉽게 변경하고 주소 표시줄의 매개변수를 가져올 수 있습니다. 이러한 방식으로 Vue 애플리케이션에서 고급 페이지 점프 및 데이터 전송을 구현할 수 있습니다.

위 내용은 Vue 라우팅을 통해 주소 표시줄의 매개변수를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!