JavaScript路由跳轉：完整教程

JavaScript路由跳轉指的是通過JavaScript代碼來控制頁面的跳轉和展示。在前端開發中，這是一個重要的技能點。本篇文章將從多個方面詳細介紹JavaScript路由跳轉的相關知識。

一、路由跳轉概述

路由跳轉是指通過改變URL路徑來控制Web應用的導航。路由可以是基於Hash，也可以是基於HTML5的History API。

在路由跳轉中，一個URL路徑對應着一個視圖，這個視圖可以是靜態的，也可以是動態生成的。路由跳轉可以幫助我們掌握用戶的導航狀態，實現單頁應用中的頁面切換。

二、基於Hash的路由跳轉

基於Hash的路由跳轉是通過改變URL中的#後面的內容來控制跳轉的。Hash是URL的組成部分，不會觸髮網頁的刷新，所以新頁面的內容可以通過JavaScript代碼動態改變。

window.location.hash = '#/page1';

window.addEventListener("hashchange", function(){
    console.log("hash changed");
});

以上代碼將頁面跳轉到’/page1’的路徑下，並且添加一個回調函數來監聽hash的變化。我們可以在回調函數中實現路由的切換。比如：

window.addEventListener("hashchange", function(){
    switch(window.location.hash){
        case '#/page1':
            // 加載page1視圖
            break;
        case '#/page2':
            // 加載page2視圖
            break;
        default:
            // 加載默認視圖
    }
});

以上代碼將根據URL路徑的不同而顯示不同的視圖內容。

三、基於HTML5 History API的路由跳轉

HTML5的History API提供了一種更加靈活的方式來控制路由跳轉。通過它，我們可以動態改變URL路徑，並在不刷新整個頁面的情況下切換視圖內容。下面是一個簡單的例子：

history.pushState(null, null, '/page1');

window.addEventListener("popstate", function(){
    console.log("popstate event fired");
});

以上代碼將頁面跳轉到’/page1’的路徑下，並添加一個回調函數來監聽歷史記錄的變化。我們可以在回調函數中實現路由的切換。比如：

window.addEventListener("popstate", function(){
    switch(window.location.pathname){
        case '/page1':
            // 加載page1視圖
            break;
        case '/page2':
            // 加載page2視圖
            break;
        default:
            // 加載默認視圖
    }
});

以上代碼將根據URL路徑的不同而顯示不同的視圖內容。

四、路由跳轉實踐

路由跳轉的實現，需要同時考慮到路由的設計和視圖的實現。下面是一個基於HTML5 History API的路由跳轉的完整代碼實例：

// 定義路由映射表
var routes = {
    '/': 'home',
    '/about': 'about',
    '/contact': 'contact'
};

// 加載視圖函數
function loadView(viewName){
    // 將視圖名稱轉換成視圖路徑
    var viewPath = '/views/' + viewName + '.html';

    // 加載視圖內容
    $.get(viewPath, function(data){
        $('#app').html(data);
    });
}

// 路由切換函數
function router(){
    // 解析當前URL路徑並獲取對應的視圖名稱
    var viewName = routes[window.location.pathname];

    // 如果對應的視圖名稱存在，則加載對應的視圖
    if(viewName){
        loadView(viewName);
    }
    // 如果對應的視圖名稱不存在，則跳轉到404頁面
    else{
        loadView('404');
    }
}

// 初始化路由及視圖
router();

// 監聽歷史記錄變化
window.addEventListener("popstate", function(){
    router();
});

// 監聽a標籤的click事件
$('body').on('click', 'a', function(e){
    e.preventDefault();
    var href = $(this).attr('href');

    // 如果鏈接是外部鏈接，則跳轉到對應頁面
    if(href.indexOf('http') === 0){
        window.location.href = href;
    }
    // 如果鏈接是當前頁面內部的鏈接，則使用History API進行路由跳轉
    else{
        history.pushState(null, null, href);
        router();
    }
});

以上代碼中，首先定義了一個路由映射表用來保存URL路徑和視圖名稱之間的關係。然後定義了一個加載視圖的函數和一個路由切換的函數。在頁面加載完畢後，會初始化路由及視圖，然後監聽History API的popstate事件和a標籤的click事件。當用戶點擊鏈接時，會先判斷鏈接是否是外部鏈接，如果是則直接跳轉到對應的頁面，否則採用History API進行路由跳轉。