The page will strangely refresh when I click the button

Add @submit.prevent to your form.

<form @submit.prevent>
 ....
</form>

You should add type="button" to your <button>.

If you don't specify a type of a <button> in a <form>, it will behave like a submit button by default, which refreshes the page.

Docs:

<type="submit"> The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

Or you can do it the vuejs way using Event modifiers like this:

<button v-on:click.prevent="validate" class="btn btn-lg btn-primary btn-block">登录</button>

The prevent event modifier prevents the default behaviour.

Its just like using event.preventDefault() inside your event handler