{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧭 1. Что такое роутинг в Vue.js"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Роутинг (Routing)"},{"type":"text","text":" — это механизм, который позволяет создавать "},{"type":"text","marks":[{"type":"bold"}],"text":"SPA (Single Page Application)"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"в которых переходы между страницами происходят "},{"type":"text","marks":[{"type":"bold"}],"text":"без перезагрузки браузера"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В Vue за маршрутизацию отвечает "},{"type":"text","marks":[{"type":"bold"}],"text":"официальная библиотека"},{"type":"text","text":" 👉 "},{"type":"text","marks":[{"type":"code"}],"text":"vue-router"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 2. Установка Vue Router"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если у тебя проект создан через Vite, просто установи пакет:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"npm install vue-router\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧱 3. Базовая настройка маршрутизатора"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Создай файл "},{"type":"text","marks":[{"type":"code"}],"text":"src/router/index.js"},{"type":"text","text":" (или "},{"type":"text","marks":[{"type":"code"}],"text":".ts"},{"type":"text","text":"):"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { createRouter, createWebHistory } from 'vue-router'\nimport HomePage from '@/pages/HomePage.vue'\nimport AboutPage from '@/pages/AboutPage.vue'\n\nconst routes = [\n { path: '/', component: HomePage },\n { path: '/about', component: AboutPage }\n]\n\nconst router = createRouter({\n history: createWebHistory(), // режим HTML5 history API\n routes\n})\n\nexport default router\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 4. Подключение маршрутизатора к приложению"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В "},{"type":"text","marks":[{"type":"code"}],"text":"main.js"},{"type":"text","text":" (точка входа):"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { createApp } from 'vue'\nimport App from './App.vue'\nimport router from './router'\n\nconst app = createApp(App)\napp.use(router)\napp.mount('#app')\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь "},{"type":"text","marks":[{"type":"code"}],"text":"router"},{"type":"text","text":" доступен во всём приложении."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧭 5. Отображение активного маршрута — "},{"type":"text","marks":[{"type":"code"}],"text":""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В "},{"type":"text","marks":[{"type":"code"}],"text":"App.vue"},{"type":"text","text":" вставь:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"динамическое место"},{"type":"text","text":", где Vue Router вставляет компонент,"},{"type":"hardBreak"},{"type":"text","text":"соответствующий текущему маршруту."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🚀 6. Навигация между страницами"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Есть "},{"type":"text","marks":[{"type":"bold"}],"text":"два способа перехода"},{"type":"text","text":":"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✅ Через компонент "},{"type":"text","marks":[{"type":"code"}],"text":""}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🟢 Это аналог "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":", но без перезагрузки страницы."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✅ Программная навигация (через JS)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 7. Динамические маршруты (с параметрами)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно передавать "},{"type":"text","marks":[{"type":"bold"}],"text":"динамические параметры"},{"type":"text","text":" через "},{"type":"text","marks":[{"type":"code"}],"text":":id"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const routes = [\n { path: '/users/:id', component: UserPage }\n]\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Доступ к параметрам:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Пример: "},{"type":"text","marks":[{"type":"code"}],"text":"/users/42"},{"type":"text","text":" → "},{"type":"text","marks":[{"type":"code"}],"text":"route.params.id === '42'"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔄 8. Переход с передачей параметров и query"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"router.push({ \n name: 'user', \n params: { id: 42 },\n query: { tab: 'profile' }\n})\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📍 URL будет: "},{"type":"text","marks":[{"type":"code"}],"text":"/users/42?tab=profile"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 9. Вложенные маршруты (nested routes)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно строить "},{"type":"text","marks":[{"type":"bold"}],"text":"иерархию страниц"},{"type":"text","text":" — layout + вложенные view."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"{\n path: '/dashboard',\n component: DashboardLayout,\n children: [\n { path: '', component: DashboardHome },\n { path: 'settings', component: DashboardSettings }\n ]\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В "},{"type":"text","marks":[{"type":"code"}],"text":"DashboardLayout.vue"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔒 10. Защищённые маршруты (Navigation Guards)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно контролировать доступ к маршрутам (например, требовать авторизацию):"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"router.beforeEach((to, from, next) => {\n const isAuthenticated = localStorage.getItem('token')\n if (to.meta.requiresAuth && !isAuthenticated) {\n next('/login')\n } else {\n next()\n }\n})\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 В маршрутах можно задать мету:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"{ path: '/profile', component: ProfilePage, meta: { requiresAuth: true } }\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 11. Работа с активными ссылками"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" автоматически добавляет CSS-класс "},{"type":"text","marks":[{"type":"code"}],"text":"router-link-active"},{"type":"text","text":" для текущего маршрута."},{"type":"hardBreak"},{"type":"text","text":"Можно кастомизировать его:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Главная\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 12. История (history) и режимы"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue Router поддерживает 2 режима:"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Режим"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Описание"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"createWebHistory()"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Использует HTML5 History API (красивые URL без "},{"type":"text","marks":[{"type":"code"}],"text":"#"},{"type":"text","text":")"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"createWebHashHistory()"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Использует хэши ("},{"type":"text","marks":[{"type":"code"}],"text":"/#/about"},{"type":"text","text":"), удобно для статического хостинга"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📘 Итог"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Роутинг во Vue.js"},{"type":"text","text":" реализуется через "},{"type":"text","marks":[{"type":"code"}],"text":"vue-router"},{"type":"text","text":" и позволяет:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Навигировать между компонентами без перезагрузки страницы,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Использовать динамические и вложенные маршруты,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Добавлять guards (проверки, редиректы),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Создавать layout-компоненты и SPA-структуру."}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Роутинг и навигация

Комментарии