Vue Router — маршрутизация

npm install vue-router

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/HomeView.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/views/AboutView.vue'),
    },
  ],
})

export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

<template>
  <nav>
    <RouterLink to="/">Главная</RouterLink>
    <RouterLink to="/about">О проекте</RouterLink>
  </nav>
  <RouterView />
</template>

{
  path: '/users/:id',
  name: 'user',
  component: () => import('@/views/UserView.vue'),
}

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
const userId = route.params.id // string | string[]
</script>

{ path: '/users/:id/:tab?' }

{ path: '/files/:path(.*)*' } // /files/a/b/c → path = ['a', 'b', 'c']

{
  path: '/dashboard',
  component: () => import('@/views/DashboardLayout.vue'),
  children: [
    {
      path: '',           // /dashboard
      component: () => import('@/views/DashboardHome.vue'),
    },
    {
      path: 'settings',   // /dashboard/settings
      component: () => import('@/views/DashboardSettings.vue'),
    },
    {
      path: 'profile',    // /dashboard/profile
      component: () => import('@/views/DashboardProfile.vue'),
    },
  ],
}

<template>
  <aside>
    <RouterLink to="/dashboard">Обзор</RouterLink>
    <RouterLink to="/dashboard/settings">Настройки</RouterLink>
    <RouterLink to="/dashboard/profile">Профиль</RouterLink>
  </aside>
  <main>
    <RouterView />
  </main>
</template>

import { useRouter } from 'vue-router'

const router = useRouter()

// Переход по имени роута
router.push({ name: 'user', params: { id: '42' } })

// Переход по пути
router.push('/about')

// С query-параметрами
router.push({ path: '/search', query: { q: 'vue', page: '1' } })

// Замена текущей записи в истории
router.replace({ name: 'home' })

// Переход назад/вперёд
router.go(-1)
router.go(1)

router.beforeEach((to, from) => {
  const auth = useAuthStore()

  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { name: 'login', query: { redirect: to.fullPath } }
  }
})

router.afterEach((to, from) => {
  document.title = to.meta.title ?? 'Моё приложение'
})

{
  path: '/admin',
  component: () => import('@/views/AdminView.vue'),
  beforeEnter: (to, from) => {
    if (!isAdmin()) return { name: 'home' }
  },
}

<script setup lang="ts">
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteLeave((to, from) => {
  const hasChanges = false // проверка несохранённых данных
  if (hasChanges) {
    const answer = confirm('Есть несохранённые изменения. Уйти?')
    if (!answer) return false
  }
})

onBeforeRouteUpdate(async (to, from) => {
  // Вызывается при смене параметров того же роута
  // /users/1 → /users/2
  await fetchUser(to.params.id)
})
</script>

// Ленивая загрузка (рекомендуется)
{
  path: '/about',
  component: () => import('@/views/AboutView.vue'),
}

// Eager-загрузка (для критичных роутов)
import HomeView from '@/views/HomeView.vue'
{
  path: '/',
  component: HomeView,
}

{
  path: '/admin',
  component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminView.vue'),
}

// Vite: именованные чанки
{
  path: '/admin',
  component: () => import('@/views/AdminView.vue'),
}
// Vite автоматически группирует файлы из одной директории

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    title?: string
    permissions?: string[]
  }
}

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/DashboardView.vue'),
    meta: {
      requiresAuth: true,
      title: 'Панель управления',
      permissions: ['dashboard:read'],
    },
  },
]

const routes = [
  // Редирект
  { path: '/home', redirect: '/' },
  { path: '/old-page', redirect: { name: 'new-page' } },

  // 404 — ловит все неизвестные роуты
  {
    path: '/:pathMatch(.*)*',
    name: 'not-found',
    component: () => import('@/views/NotFoundView.vue'),
  },
]

router.push({ path: '/search', query: { q: 'vue', sort: 'date' } })

const route = useRoute()
const query = route.query.q     // string | string[]
const sort = route.query.sort   // string | string[]

watch(() => route.query, (newQuery) => {
  search(newQuery.q)
})

<script setup lang="ts">
import { RouterLink, useLink } from 'vue-router'

const props = defineProps<{ to: string }>()
const { route, href, isActive, isExactActive, navigate } = useLink(props)
</script>

<template>
  <a :href="href" @click="navigate" :class="{ active: isActive }">
    <slot />
  </a>
</template>

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition

    if (to.hash) return { el: to.hash, behavior: 'smooth' }

    return { top: 0 }
  },
})

import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('@/views/HomeView.vue'),
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/LoginView.vue'),
      meta: { guestOnly: true },
    },
    {
      path: '/dashboard',
      component: () => import('@/views/DashboardLayout.vue'),
      meta: { requiresAuth: true },
      children: [
        { path: '', name: 'dashboard', component: () => import('@/views/DashboardHome.vue') },
        { path: 'settings', name: 'settings', component: () => import('@/views/SettingsView.vue') },
      ],
    },
    {
      path: '/:pathMatch(.*)*',
      name: 'not-found',
      component: () => import('@/views/NotFoundView.vue'),
    },
  ],
  scrollBehavior(to, _, savedPosition) {
    return savedPosition ?? { top: 0 }
  },
})

router.beforeEach((to) => {
  const auth = useAuthStore()

  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { name: 'login', query: { redirect: to.fullPath } }
  }

  if (to.meta.guestOnly && auth.isLoggedIn) {
    return { name: 'dashboard' }
  }
})

router.afterEach((to) => {
  document.title = `${to.meta.title ?? 'Приложение'} | Мой сайт`
})

export default router