下面为您详细讲解JavaScript实现自定义路由的完整攻略。

1. 什么是自定义路由？

自定义路由是指通过JS实现自己的路由系统，将URL请求与相应的处理函数相匹配，实现URL跳转的过程。

2. 实现步骤

2.1 步骤一：设置路由数组

在JS文件中我们需要设置一个包含所有路由规则的路由数组，该数组中的每一项都包含了一个URL路径和匹配该路径的处理函数。例如：

const routes = [
    { path: "/", handler: homePage },
    { path: "/about", handler: aboutPage },
    { path: "/contact", handler: contactPage },
    { path: "/products/:id", handler: productPage }
];

路由数组中每一项都是一个对象，包含两个键值对，其中path键表示URL路径，是一个字符串类型，后面还可能包含一个参数，如"/products/:id"，handler键表示匹配该路径的处理函数，是一个函数类型。

2.2 步骤二：监听URL变化

我们需要用JS来监听URL的变化。通过监听浏览器的popstate事件，我们可以在URL变化时执行相应的处理函数。例如：

window.addEventListener("popstate", e => {
    dispatch(e.state.path);
});

dispatch函数是我们自定义的路由分发函数，接收一个字符串参数path，路径的值就是当前浏览器地址栏中的URL路径。当我们监听到popstate事件时，就调用dispatch函数，执行相应的处理函数。

2.3 步骤三：匹配路由规则

dispatch函数的主要作用就是匹配URL路径与路由规则，然后执行相应的处理函数。我们需要遍历路由数组，通过path键来匹配URL路径，找到对应的处理函数。例如：

function dispatch(path) {
    for (let route of routes) {
        let matched = match(route.path, path);
        if (matched) {
            route.handler(matched);
            return;
        }
    }
}

match函数是我们自定义的一个用于匹配URL路径的函数。它接收两个参数：路由规则和URL路径，如果两者匹配成功，则返回一个包含所有参数的对象，否则返回null。

2.4 步骤四：实现匹配函数

match函数的实现方式有多种，可以使用正则表达式，也可以使用字符串分割等方式。这里我们演示一种基于URL路径字符串分割的实现方式，例如：

function match(routePath, urlPath) {
    const routeParts = routePath.split("/");
    const urlParts = urlPath.split("/");

    if (routeParts.length !== urlParts.length) {
        return null;
    }

    const params = {};

    for (let i = 0; i < routeParts.length; i++) {
        if (routeParts[i].charAt(0) === ":") {
            const paramName = routeParts[i].substring(1);
            params[paramName] = urlParts[i];
        } else if (routeParts[i] !== urlParts[i]) {
            return null;
        }
    }

    return params;
}

该函数的主要作用就是将URL路径和路由规则分割为数组，然后遍历对应元素进行匹配。如果数组长度不一致，则直接返回null。如果路由规则中有参数（以冒号:开头），则将该参数的名字作为键名，将对应的URL路径部分作为键值，放入参数对象中返回。如果路由规则和URL路径有任意一个元素不匹配，则也返回null，表示匹配失败。

3. 示例

假设我们有一个简单的静态网站，其中包含以下几个页面：首页、关于我们、联系我们、产品详情。我们的URL路由规则和对应的处理函数如下：

const routes = [
    { path: "/", handler: homePage },
    { path: "/about", handler: aboutPage },
    { path: "/contact", handler: contactPage },
    { path: "/products/:id", handler: productPage }
];

// 处理函数示例
function homePage() {
    console.log("这是首页");
}

function aboutPage() {
    console.log("这是关于我们页面");
}

function contactPage() {
    console.log("这是联系我们页面");
}

function productPage(matchParams) {
    console.log("这是产品详情页面，产品ID为：" + matchParams.id);
}

我们可以在dispatch函数中输出当前匹配到的URL路径和参数信息，例如：

function dispatch(path) {
    for (let route of routes) {
        let matched = match(route.path, path);
        if (matched) {
            console.log("匹配到URL路径：" + path + "，路由规则：" + route.path);
            console.log("匹配到的参数为：", matched);
            route.handler(matched);
            return;
        }
    }
}

当我们在浏览器地址栏中输入http://example.com/about时，就会输出以下内容：

匹配到URL路径：/about，路由规则：/about
匹配到的参数为： null
这是关于我们页面

当我们在浏览器地址栏中输入http://example.com/products/123时，就会输出以下内容：

匹配到URL路径：/products/123，路由规则：/products/:id
匹配到的参数为： {id: "123"}
这是产品详情页面，产品ID为：123

从以上示例可以看出，通过自定义路由规则，我们可以非常灵活地控制网站的URL跳转，实现SPA应用的效果。

本文链接：http://task.lmcjl.com/news/6394.html