[Vue.js] 파라미터에서 데이터 받아와 이벤트 수행

<template>
	<v-form
		@submit.prevent="checkEmail"
		v-model="validEmail"
		style="margin-top: 25px"
	>
		<v-text-field
			background-color="#fff"
			ref="email"
			dense
			type="email"
			:rules="emailRules"
			:placeholder="$t('form.enter_your_email_address')"
			v-model="userId"
			outlined
		/>
		<v-btn
			class="mr-3"
			style="border-radius: 0; border: 2px solid #4796d1; color: #fff"
			depressed
			width="174"
			color="#1466a1"
			@click="$router.push({ name: 'OutPage' })"
		>
			{{ $t('button.prev') }}
		</v-btn>
		<v-btn
			@click.prevent="checkEmail"
			:disabled="!validEmail"
			type="submit"
			style="border-radius: 0; border: 2px solid #0094ff; color: #fff"
			depressed
			width="174"
			color="#75c4ff"
		>
			{{ $t('button.next') }}
		</v-btn>
	</v-form>
</template>

<script>
export default {
	name: 'PasswordEmail',
	data() {
		return {
			userId: '',
			validEmail: false,
			emailRules: [
				v => !!v || this.$t('form.enter_your_email'),
				v => /.+@.+/.test(v) || this.$t('form.the_email_format_is_invalid'),
			],
		};
	},
	mounted() {
		this.$refs.email.focus();
		let query = this.$route.query;
		if (Object.keys(query).length > 0) {
			this.userId = this.$route.query.userId;
			window.onload = this.checkEmail;
		} else {
			return this.userId;
		}
	},
	methods: {
		checkEmail() {
			const form = new FormData();
			form.append('userId', this.userId);
			this.$store
				.dispatch('INTERFACE_MEMEBER_ADCHECK', form)
				.then(res => {
					let param = { userId: this.userId };
					if (res.resultCode === 0) {
						param.uuid = res.uuid;
					}
					this.$router.replace({
						name: 'FormPassword',
						params: param,
					});
				})
				.catch(() => {
					// 에러가 발생할 경우 경고 다이어로그 표시
					this.visible = true;
					this.content = {
						title: this.$t('common.alarm'),
						sentence: this.$t(
							'error.an_error_occurred_during_the_user_verification_process',
						),
					};
				});
		},
	},
};
</script>