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.keyword
rrreee
?
로 구분된 키-값 쌍으로, 다양한 매개변수를 문자열 형식으로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!