Теперь, когда у нас есть несколько страниц, по которым мы можем перемещаться, у нас есть открытая страница и страница, которую нам предстоит закрыть для не аутентефецированных пользователей.

Чтобы мы могли закрыть эту страницу, в первую очередь, нам нужно создать страницу, через которую пользователь сможет входить на сайт. Это будет так называемая login page. Страница входа на сайт. 

Давайте сейчас с вами займемся созданием этой страницы.Создадим простую страницу для входа на сайт и в дальнейших видео приступим к созданию механизма аутентификации на сайте.

Для этого нам потребуется создать новый компонент. Допустим, на основе page1.vue. Новый компонент мы назовем loginPage.vue.

Все, что нам нужно - это некая форма входа на сайт, в которой будет имя пользователя и пароль этого пользователя и кнопка войти.

При попытке отправить эту форму, у нас идет блокировка prevent браузерной отправки формы, чтобы браузер не отправлял форму, а отправлял наши данные, которые мы имеем в нашей форме. 

Соответственно, нам нужно это реализовать. У нас есть data - данные нашего компонента, в котором есть имя пользователя и его пароль. 

И у нас будет метод login, который будет выполняться после попытки отправить нашу форму.

Такая простая форма. И нужно в файле router.js прописать путь к этому компоненту. 

{
            path: "/login",
            component: LoginPage
}

Адрес login и компонент LoginPage. Давайте импортируем этот компонент. 

import LoginPage from "@/components/LoginPage";
<template>
  <div class="hello">
    <div class="login">
      <form @submit.prevent="login">
        <h1>Войти на сайт</h1>
        <label for="username">Имя пользователя</label>
        <input type="text" v-model="username" name="username">
        <label for="password">Пароль</label>
        <input type="text" v-model="password" name="password">
        <button>Войти</button>
      </form>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      username: 'Vasya',
      password: '12345'
    }
  },
  methods: {
    login() {
console.log('1');    
}
  }
}
</script>

Можно попробовать запустить Vue приложение и попробовать ввести в форму какие-то данные.