Итак, у нас есть некое Vue приложение и следующая задача, которая перед нами стоит, это добавить в приложение некие страницы, по которым мы сможем переходить. 

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

Для этой цели мы можем для каждой страницы создать отдельный компонент, который будем выводить уже с помощью роутов. Мы установим специальное расширение для роутинга Vue и будем с помощью него отображать для каждой страницы соответствующий компонент. 

Для этого нам нужно подготовиться. 

Давайте создадим некую страницу page1.vue на основе HelloWorld компонента. Это будет обычная открытая страница, которая будет доступна для всех. 

<template>
  <div class="hello">
    <p>Открытая страница</p>
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

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

<template>
  <div class="hello">
    <p>Закрытая страница страница</p>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

Теперь у нас задача сделать так, чтобы мы могли перемещаться по этим страницам, чтобы у нас это все открывалось.

Для решения этой задачи во Vue есть специальное расширение, которая так и называется Vue Router. Найти эту библиотеку можно по адресу:

https://router.vuejs.org

Там мы ее можем скачать и посмотреть. Переходим в раздел Guide (установка) и установим пакет через пакетный менеджер npm.

npm install vue-router@4

Копируем команду и устанавливаем ее в наш проект. Соответственно, у нас расширение было установлено. В списке зависимостей в файле package.json мы должны увидеть vue-router.

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

В папке src я создаю новый файл, который назову router.js. Этот файл можно создать где угодно в проекте, важно, чтобы этот файл был и это файл с нашими настройками нашего роутинга.

Этот файл представляет собой набор конструкций, в которых мы описываем какие компоненты есть в нашем приложении и какие страницы роуты им соответствуют.

import { createRouter, createWebHistory } from 'vue-router';
import Page1 from "@/components/page1";
import Dashboard from "@/components/dashboard";
import HelloWorld from "@/components/HelloWorld";


export default createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/page1",
            component: Page1
        },
        {
            path: "/dashboard",
            component: Dashboard,
        },
        {
            path: "/",
            component: HelloWorld
        },
    ]
})

Мы указываем path, путь для доступа к какому-то компоненту и компонент, который этому пути соответствует. Мы должны импортировать туда наши компоненты. 

Теперь важно подключить этот роутинг в нашем главном файле main.js. 

import router from "@/router"
app.use(router)

Теперь нам нужно файле App.vue прописать главный тэг, который будет выводить наши роуты. Для этого я прописываю здесь такую конструкцию

<router-view></router-view>

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

Таким образом, мы с вами создали систему Vue роутов, установили специальное расширение для работы с роутами и в нашем проекте появились некие страницы, с которыми мы можем в дальнейшем работать.

Следующая задача состоит в том, чтобы закрыть закрытую страницу, чтобы она была у нас доступна только аутентифицированным пользователям, а открытая страница у нас была бы доступна всем.