Базовая маршрутизация в Vueв

Давайте посмотрим, как это будет выглядеть в шаблоне нашего приложения. Нам нужно добавить специальный компонент <router-view>, который будет служить местом для рендеринга соответствующего компонента в зависимости от текущего маршрута:

App.vue<template>
  <div id="app">
    <nav>
      <router-link to="/">Главная</router-link>
      <router-link to="/worker">Рабочии</router-link>
      <router-link to="/user">Пользователи</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

Здесь мы добавили два <router-link>, это такие же ссылки, как <a>, но они управляются Vue Router и не вызывают перезагрузку страницы. С помощью to указываем, к какому маршруту должна вести ссылка.

<router-view> отвечает за отображение нужного компонента, который связан с маршрутом. Например, если вы перейдёте на /user, в этом месте рендерится компонент User.

components/User.vue<script>
export default {
  data() {
    return {
      name: 'Пользователи',
    }
  }
}
</script>
<template>
  <h3>{{ name }}</h3>
</template>

components/Worker.vue<script>
export default {
  data() {
    return {
      name: 'Рабочии',
    }
  }
}
</script>
<template>
  <h3>{{ name }}</h3>
</template>