Каковы шаги для использования маршрутизатора vue и приведите пример?vue-41

Vue Router — это официальная библиотека для маршрутизации в Vue.js, позволяющая создавать одностраничные приложения (SPA) с множеством "страниц". Вот пошаговая инструкция по его использованию:

Шаг 1: Установка Vue Router

Сначала необходимо установить библиотеку через npm или yarn:

npm install vue-router

Шаг 2: Настройка маршрутов

Создайте файл router.js (или router/index.js) и определите маршруты:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

Шаг 3: Подключение роутера к приложению

В главном файле приложения (обычно main.js):

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

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

Шаг 4: Использование <router-view> и <router-link>

В вашем основном компоненте (обычно App.vue):

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

Шаг 5: Дополнительные возможности

  1. Динамические маршруты:
{ path: '/user/:id', component: User }
  1. Навигационные хуки:
router.beforeEach((to, from, next) => {
  // логика проверки доступа
  next()
})
  1. Ленивая загрузка:
{ path: '/settings', component: () => import('./views/Settings.vue') }

Полный пример

Вот как может выглядеть полная реализация простого маршрутизатора:

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

<!-- App.vue -->
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

Резюмируем

  1. Установите Vue Router
  2. Создайте конфигурацию маршрутов
  3. Подключите роутер к приложению
  4. Используйте <router-view> для отображения компонентов и <router-link> для навигации
  5. При необходимости используйте дополнительные функции (динамические маршруты, хуки, ленивую загрузку)

Vue Router предоставляет мощный и гибкий инструментарий для создания сложных SPA-приложений с поддержкой истории браузера и множеством дополнительных возможностей.

Вопросы

Собеседования