Работа с динамическими маршрутами и защищенными маршрутами

Динамические маршруты

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

Создание динамического маршрута

Чтобы создать динамический маршрут, добавьте параметр с двоеточием в путь маршрута:

{ path: '/post/:id', component: PostComponent }

Получение параметров динамического маршрута

Для доступа к параметрам маршрута в компоненте используйте route.params:

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const postId = route.params.id;

    return {
      postId,
    };
  },
};

Защищенные маршруты

Защищенные маршруты позволяют ограничить доступ к определенным страницам вашего приложения. Например, вы можете разрешить доступ только авторизованным пользователям.

Создание глобального хука перед маршрутизацией

Чтобы добавить проверку авторизации перед переходом на маршрут, создайте глобальный хук beforeEach:

import { createRouter, createWebHistory } from 'vue-router';
// ...импорт компонентов и маршрутов...

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('auth');

  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

export default router;

Установка метаданных маршрута

Добавьте метаданные requiresAuth к маршрутам, доступ к которым должен быть ограничен:

const routes = [
  // ...
  { path: '/dashboard', component: DashboardComponent, meta: { requiresAuth: true } },
];

Теперь пользователи без авторизации не смогут перейти на страницу ‘/dashboard’ и будут перенаправлены на страницу ‘/login’.

Динамические и защищенные маршруты являются важными элементами при разработке веб-приложений на Vue.js 3. Они позволяют создавать гибкие маршруты на основе переменных и ограничивать доступ к определенным страницам вашего приложения.