Vue.js에서 주소 표시줄 매개변수를 숨기는 방법

Vue.js를 사용하여 프런트엔드 프로젝트를 개발할 때 URL 주소 표시줄 매개변수 처리는 매우 기본적이지만 중요한 문제입니다. 많은 경우에는 URL에서 매개변수를 가져와야 합니다. 예를 들어 이전 페이지에서 현재 페이지로 이동할 때 일부 정보를 이 페이지에 전달해야 합니다. 매개변수 형태로. 그러나 때로는 이러한 매개변수를 숨겨야 할 수도 있습니다. 따라서 URL의 민감한 정보는 쉽게 유출되어서는 안 됩니다. 따라서 이 기사에서는 Vue.js에서 주소 표시줄 매개변수를 숨기는 방법을 소개합니다.

1. 동적 라우팅

우선 Vue.js의 동적 라우팅을 통해 주소 표시줄의 매개변수를 숨길 수 있습니다. 동적 라우팅은 URL의 매개변수를 표시되는 실제 구성요소에 매핑하는 기술입니다. 예를 들어, 기사 목록 페이지가 있다고 가정합니다. 각 기사에는 이 기사를 식별하는 고유 ID가 있으며, 이 ID를 경로의 매개변수로 사용한 다음 구성 요소에서 이 ID를 읽어서 얻을 수 있습니다. 해당 기사 정보.

구체적으로 먼저 라우팅 구성에서 동적 경로를 정의하고 경로 경로의 특정 세그먼트(예: 기사 ID)를 동적 매개변수로 설정할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/article/:id',
      name: 'Article',
      component: Article
    }
  ]
})

이 예에서는 :id는 기사의 ID를 나타내는 동적 매개변수입니다. 해당 컴포넌트에서는 <code>$route.params.id를 통해 이 매개변수의 값을 얻을 수 있습니다. :id 就是一个动态参数，表示文章的 ID。在对应的组件中，我们可以通过 $route.params.id 来获取这个参数的值：

export default {
  mounted () {
    console.log(this.$route.params.id)
  }
}

这样，在用户访问这个路由时，即可在组件中获取到参数的值，而 URL 中并不会显示这个参数。

二、Query 参数

除了使用动态路由，我们还可以通过 Query 参数来隐藏地址栏中的参数。Query 参数是一种通过 ? 分隔的键值对，可以将各种参数以字符串的方式传递给 URL。

举个例子，我们假设有一个搜索页，需要在搜索时将用户输入的关键词传递给服务器来获取匹配的结果，可以将输入的关键词作为 Query 参数，然后在路由组件中获取和解析这个参数：

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      name: 'Search',
      component: Search
    }
  ]
})

// 当用户在输入框中输入搜索关键词时
this.$router.push({
  name: 'Search',
  query: { keyword: '关键词' }
})

export default {
  mounted () {
    console.log(this.$route.query.keyword)
  }
}

在这个例子中，query 选项表示传递的参数。然后在组件中可以通过 $route.query.keywordrrreee

이렇게 하면 사용자가 이 경로에 접근하면 해당 매개변수를 컴포넌트에서 얻을 수 있습니다. 값이며 이 매개변수는 URL에 표시되지 않습니다.

2. 쿼리 매개변수

동적 라우팅을 사용하는 것 외에도 쿼리 매개변수를 사용하여 주소 표시줄에서 매개변수를 숨길 수도 있습니다. 쿼리 매개변수는 ?로 구분된 키-값 쌍으로, 다양한 매개변수를 문자열 형식으로 URL에 전달할 수 있습니다.

예를 들어, 검색 페이지가 있고, 일치하는 결과를 얻기 위해서는 검색 시 사용자가 입력한 키워드를 서버에 전달해야 한다고 가정합니다. 라우팅 구성 요소의 매개변수:

rrreee

이 예에서 query 옵션은 전달된 매개변수를 나타냅니다. 그러면 컴포넌트의 $route.query.keyword를 통해 이 매개변수의 값을 얻을 수 있습니다. 이런 방식으로 전달된 실제 매개변수는 URL에 표시되지 않습니다.

3. URL에 암호화된 매개변수 사용🎜🎜위의 두 가지 방법 외에도 URL에 암호화된 매개변수를 사용하여 주소 표시줄 매개변수를 숨길 수도 있습니다. 구체적으로, 매개변수를 URL에 전달하기 전에 암호화할 수 있으므로, 다른 사람이 URL을 가로채더라도 실제 매개변수 값을 쉽게 파싱할 수 없습니다. 🎜🎜암호화 방법에는 여러 가지가 있으며 암호화에는 대칭 암호화(예: DES, AES) 또는 비대칭 암호화(예: RSA)와 같은 알고리즘을 사용할 수 있습니다. 여기에는 별로 소개가 없습니다. 🎜🎜Vue.js에서 암호화된 매개변수를 사용할 때 암호화된 매개변수를 Cookie 또는 LocalStorage와 같은 로컬 저장소에 쓴 다음 후속 페이지에서 이 데이터를 읽고 해독할 수 있습니다. 이렇게 하면 암호화된 매개변수가 로컬 저장소에만 표시되고 URL에는 노출되지 않습니다. 주의해야 할 유일한 점은 암호화된 매개변수의 길이가 일반 텍스트 매개변수의 길이보다 작아야 한다는 것입니다. 그렇지 않으면 쿠키 및 기타 메모리가 너무 커질 수 있습니다. 🎜🎜위는 Vue.js에서 주소 표시줄 매개변수를 숨기는 세 가지 방법입니다. 어떤 방법을 사용하든 보안을 보장하면서 URL의 매개변수 값을 최대한 숨겨야 합니다. 물론 이는 간단한 문제가 아니지만 실제 개발에서는 일부 민감한 데이터에 있어 이 문제가 매우 중요합니다. 🎜

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