JS властивість Location.pathname

Загальний опис

Властивість pathname об'єкта Location в JavaScript відіграє ключову роль у навігації та роутингу веб-додатків. Вона повертає частину URL, що вказує на конкретний шлях (або "path") на веб-сервері. Це дозволяє розробникам визначати, яка частина веб-додатку в даний момент використовується, та відповідно реагувати на зміни у цій частині.

pathname повертає рядок, що представляє шлях до ресурсу на веб-сервері. Наприклад, для URL https://www.example.com/catalog/search?q=dress, pathname поверне /catalog/search. Ця властивість є особливо корисною для розробки односторінкових застосунків (SPA), де управління роутингом здійснюється на стороні клієнта.

Приклади використання:

1. Отримання поточного шляху: Основне використання pathname полягає в отриманні шляху поточного URL:

    let currentPath = window.location.pathname;
    console.log(currentPath);
   

   Цей код виведе на консоль шлях поточної веб-сторінки.

2. Використання у SPA роутингу: У односторінкових застосунках pathname може використовуватися для визначення активної сторінки та зміни вмісту відповідно до неї:

    switch (window.location.pathname) {
   	 case '/home':
   			 showHomePage();
   			 break;
   	 case '/about':
   			 showAboutPage();
   			 break;
   	 case '/contact':
   			 showContactPage();
   			 break;
   	 default:
   			 showNotFoundPage();
   			 break;
    }
   

   Такий код дозволяє управляти відображенням різних частин SPA без перезавантаження сторінки.

3. Реалізація динамічного навігаційного меню: pathname може бути використаний для визначення, який пункт меню є активним, змінюючи його стиль або поведінку:

    document.querySelectorAll('.nav-item').forEach(item => {
   	 if (item.getAttribute('href') === window.location.pathname) {
   			 item.classList.add('active');
   	 }
    });
   

   Цей код вибирає активний пункт меню на основі поточного шляху.

location.pathname є надзвичайно важливим для створення інтуїтивно зрозумілої навігації в веб-додатках, особливо в односторінкових застосунках. Його використання дозволяє розробникам ефективно керувати змістом веб-сторінок, покращуючи при цьому користувацький досвід.

правити

Порада

Використовуйте location.pathname для отримання відносного шляху веб-сторінки відносно кореня сайту. Це може бути корисно для аналізу поточної структури URL, особливо при роботі з односторінковими додатками (SPA), де шлях часто визначає стан або вміст сторінки.

автор: Bond правити

Порада

Коли розробляєте маршрутизацію в своєму додатку, location.pathname може використовуватися для визначення активної сторінки чи розділу сайту. Це може бути особливо корисним для динамічного зміни контенту або навігації без перезавантаження сторінки.

автор: Bond правити

Порада

При створенні навігаційних меню або хлібних крихт (breadcrumb), location.pathname може бути використаний для виділення активного пункту меню або для визначення шляху користувача в межах сайту, підвищуючи зрозумілість навігації.

автор: Bond правити

Порада

Уникайте прямої залежності від конкретних шляхів, закодованих у вашому JavaScript коді, оскільки це може ускладнити переносимість і масштабування вашого додатку. Замість цього, розгляньте можливість використання зовнішніх конфігурацій або шаблонів маршрутизації для більшої гнучкості у обробці URL-шляхів.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

location.pathname

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤12.1	12	3

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	1.7*

Приклади

+ запропонувати свій приклад у пісочниці

// Отримання шляху поточної веб-сторінки
let currentPath = window.location.pathname;
console.log(currentPath);

// Функція для керування вмістом в залежності від шляху URL
function manageContentBasedOnPath() {
    let path = window.location.pathname;

    switch(path) {
        case '/about':
            console.log('Розділ: Про нас');
            break;
        case '/contact':
            console.log('Розділ: Контакти');
            break;
        case '/products':
            console.log('Розділ: Продукція');
            break;
        default:
            console.log('Головна сторінка');
    }
}

manageContentBasedOnPath();