vue는 매개변수를 사용하여 html을 점프합니다.

Vue 애플리케이션에서는 종종 다른 HTML 페이지 사이를 이동해야 합니다. 때로는 비즈니스 요구 사항을 충족하기 위해 점프에 대한 매개변수를 전달해야 하는 경우도 있습니다. 이 기사에서는 Vue 애플리케이션에서 매개변수를 사용하여 HTML 페이지로 이동하는 방법을 소개합니다.

1. Vue Router 사용

Vue Router는 SPA 애플리케이션의 라우팅 점프를 쉽게 구현할 수 있는 Vue.js의 공식 라우팅 관리자입니다. Vue 애플리케이션에서 Vue Router를 사용하면 매개변수를 사용하여 HTML 페이지 점프를 쉽게 구현할 수 있습니다.

1. Vue Router 설치

Vue Router를 사용하기 전에 먼저 설치해야 합니다. Vue Router는 npm을 통해 설치할 수 있습니다.

npm install vue-router --save

설치가 완료된 후 아래와 같이 Vue Router를 Vue 프로젝트에 도입합니다.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

2. 라우팅 구성

Vue Router를 사용하기 전에 경로 점프를 하려면 먼저 라우팅 구성이 필요합니다. Vue Router에서 라우팅을 구성하는 것은 매우 간단합니다. 각 요소는 라우팅 구성을 나타냅니다. 예:

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
]

const router = new Router({
  routes,
  mode: 'history'
})

export default router

위 코드는 두 가지 라우팅 구성을 정의합니다. 첫 번째 경로의 해당 경로는 "/home"이고 구성 요소는 Home입니다. 두 번째 경로의 해당 경로는 "/detail/:id"입니다. 여기서 "id"는 동적 매개 변수이고 구성 요소는 Detail입니다.

3. 루트 점프 수행

Vue Router에서 루트 점프를 수행하는 것은 매우 간단합니다. 점프하려면 라우터 링크 구성 요소를 사용하고 프로그래밍 방식으로 탐색하려면 router.push 메서드를 사용하세요.

• 라우터 링크를 사용하여 점프

Vue 구성 요소의 템플릿에서 라우터 링크 구성 요소를 사용하면 쉽게 경로 점프를 만들 수 있습니다. 예:

<router-link :to="{name: 'detail', params: {id: 123}}">Show Detail</router-link>

위 코드에서 라우터 링크 구성 요소는 "detail"이라는 경로로 점프하는 데 사용되며 값이 123인 "id" 매개 변수를 전달합니다.

• 점프하려면 router.push 메소드를 사용하세요

Vue 구성 요소에서 router.push 메소드를 사용하면 프로그래밍 방식 탐색을 구현할 수 있습니다. 예:

this.$router.push({name: 'detail', params: {id: 123}})

위 코드에서 router.push 메소드는 "detail"이라는 경로로 점프하는 데 사용되며 값이 123인 "id" 매개변수를 전달합니다.

2. location.href 사용

경로 점프에 Vue Router를 사용하는 것 외에도 점프에 기본 location.href를 사용할 수도 있습니다. location.href를 통해 경로 점프를 구현할 때 URL을 수동으로 연결하고 매개변수를 인코딩해야 합니다.

1. location.href를 사용하여 점프

location.href를 사용하여 점프하는 것은 매우 간단합니다. 예를 들어, "detail"이라는 HTML 페이지로 이동하고 값이 123인 "id" 매개변수를 전달하려고 합니다. 이는 다음과 같습니다.

location.href = '/detail.html?id=' + encodeURIComponent('123')

위 코드에서 encodeURIComponent 메소드는 매개변수. 이는 특수 문자가 포함된 매개변수로 인해 리디렉션 URL의 형식이 잘못되는 것을 방지하기 위해 수행됩니다.

2. HTML 페이지에서 매개변수 가져오기

매개변수가 있는 HTML 페이지로 이동한 후 이후 사용을 위해 URL에서 매개변수를 가져와야 합니다. JavaScript에서는 location.search를 통해 URL의 매개변수 부분을 가져올 수 있습니다. 예를 들어 "detail"이라는 HTML 페이지로 이동하고 매개변수 "id"의 값이 123이라고 가정합니다. 다음 코드를 통해 매개변수를 얻을 수 있습니다.

function getUrlParam(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  const r = window.location.search.substr(1).match(reg)
  if (r != null) {
    return decodeURIComponent(r[2])
  }
  return null
}

const id = getUrlParam('id')
console.log(id) // 输出123

위 코드에서 RegExp 및 match 메소드는 다음과 같습니다. 매개변수를 얻는 데 사용됩니다. URL의 매개변수 부분입니다. 매개변수에 포함된 특수 문자로 인해 발생하는 구문 분석 오류를 방지하려면 decodeURIComponent 메서드를 사용하여 매개변수를 디코딩하세요.

결론적으로, 루트 점프에는 Vue Router를 사용하는 것이 더 권장되는 방법입니다. 라우팅을 더 잘 관리하고 더 빠르게 점프할 수 있으며 Vue의 MVVM 아이디어와 더 일치합니다. 물론 라우팅 점프를 위해 기본 location.href를 사용할 수도 있지만 매개변수의 인코딩 및 디코딩에 주의를 기울여야 합니다. 실제 개발에서는 실제 상황에 따라 적절한 방법을 선택하는 것이 필요합니다.

위 내용은 vue는 매개변수를 사용하여 html을 점프합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!