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

Мы должны подключить, указать все те роуты, которые будут в нашем проекте. 

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

routes: [

{path: '/', component: HelloWorld}

]

То есть path определяет путь, по которому должен будет переходить пользователь, и component - тот компонент, который у нас должен отобразиться в тот момент, когда пользователь перешёл по какому-то адресу. 

Роутинг представляет у нас собой указание пути (строкового значения пути) и того компонента, который должен отобразиться. 

Давайте, создадим ещё один route page

routes: [

{path: '/', component: HelloWorld},

{path: '/', component: HelloWorld},

]

Теперь нам нужно создать для каждого роута отдельный компонент, который будет у нас для этого подключаться. 

Как правило компоненты для роутов создаются в отдельной директории views. 

Давайте создадим компонент Main.vue и компонент, допустим, у нас будет Page.vue. Views - это как бы отдельные страницы (виды). 

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

Переход по роутам становится возможным благодаря конструкции router-view, в которую монтируются эти компоненты. 

Вот такая базовая структура для для работы с Vue роутингом. 

Попробуйте тоже такое создать и поэкспериментировать с созданием новых роутов.