【Nuxt.js】 URL의 쿼리 매개 변수를 얻는 방법
4890 단어 vue-routerVue.jsnuxt.js
vue-router를 사용하여 매개 변수 쿼리 검색
Nuxt.js에는 vue-router가 있으므로 그 기능을 사용하면 쉽게 얻을 수 있습니다.
http://localhost:3000/?id=12345
의 경우 12345
$route.query.id에서 얻을 수 있습니다.
<template>
<section>
<p>{{ $route.query.id }}</p>
</section>
</template>
form의 값에 값을 전달합니다.
이것을 양식의 input 태그의 value에 전달하려면
<template>
<form action="" method="post" id="test" name="test">
<div>
<label>お名前</label>
<input name="お名前" type="text">
</div>
<div>
<label>メールアドレス [必須]</label>
<input name="メールアドレス" type="text">
</div>
<div>
<label>お問い合わせ [必須]</label>
</div>
<div>
<input type="hidden" name="query" :value="query">
</div>
<button type="submit">送信</button>
</form>
</template>
<script>
export default {
data () {
return {
query: '',
}
},
created() {
this.setQuery()
},
methods: {
setQuery() {
this.query = this.$route.query.id || ''
},
},
}
</script>
이제 input 태그에 전달할 수있었습니다.
아니, Nuxt는 편리하네요. ![:grinning:](https://s1.md5.ltd/image/9f497141fcba5d582329dfb7ab6aaa39.png)
※전회의 어긋남으로 컨택 폼으로 썼습니다만, Nuxt로의 컨택 폼은 이것으로 좋은 것인지 미묘하기 때문에 input 태그의 value에 쿼리 파라미터를 건네주는 흐름만 파악해 주시면 좋겠습니다.
Reference
이 문제에 관하여(【Nuxt.js】 URL의 쿼리 매개 변수를 얻는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiroyukiwk/items/f309d82fb38f0dd31ae0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<template>
<section>
<p>{{ $route.query.id }}</p>
</section>
</template>
이것을 양식의 input 태그의 value에 전달하려면
<template>
<form action="" method="post" id="test" name="test">
<div>
<label>お名前</label>
<input name="お名前" type="text">
</div>
<div>
<label>メールアドレス [必須]</label>
<input name="メールアドレス" type="text">
</div>
<div>
<label>お問い合わせ [必須]</label>
</div>
<div>
<input type="hidden" name="query" :value="query">
</div>
<button type="submit">送信</button>
</form>
</template>
<script>
export default {
data () {
return {
query: '',
}
},
created() {
this.setQuery()
},
methods: {
setQuery() {
this.query = this.$route.query.id || ''
},
},
}
</script>
이제 input 태그에 전달할 수있었습니다.
아니, Nuxt는 편리하네요.
![:grinning:](https://s1.md5.ltd/image/9f497141fcba5d582329dfb7ab6aaa39.png)
※전회의 어긋남으로 컨택 폼으로 썼습니다만, Nuxt로의 컨택 폼은 이것으로 좋은 것인지 미묘하기 때문에 input 태그의 value에 쿼리 파라미터를 건네주는 흐름만 파악해 주시면 좋겠습니다.
Reference
이 문제에 관하여(【Nuxt.js】 URL의 쿼리 매개 변수를 얻는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hiroyukiwk/items/f309d82fb38f0dd31ae0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)