如何利用JavaScript的URL Pattern API匹配路由，以及它在客户端路由解析中的优势和应用？

URLPattern

test()

exec()

URLPattern

protocol

hostname

port

pathname

search

hash

:param

*

?

+

// 示例1: 匹配一个带有动态ID的用户详情页
const userProfilePattern = new URLPattern({ pathname: '/users/:id' });

// 示例2: 匹配一个可选分类的产品列表页
const productListPattern = new URLPattern({ pathname: '/products/:category?' });

// 示例3: 匹配带有多个子路径的文档页面
const docsPattern = new URLPattern({ pathname: '/docs/*' });

// 示例4: 匹配特定域名的API路径
const apiPattern = new URLPattern({ hostname: 'api.example.com', pathname: '/v1/:resource' });

test()

exec()

// 测试一个URL
const urlToTest = 'https://example.com/users/123';
if (userProfilePattern.test(urlToTest)) {
    console.log('匹配成功，这是一个用户详情页。');
}

// 提取参数
const matchResult = userProfilePattern.exec(urlToTest);
if (matchResult) {
    console.log('提取到的用户ID:', matchResult.pathname.groups.id); // 输出: 123
}

// 对于复杂的URL，可以同时匹配多个部分
const fullUrlMatch = apiPattern.exec('https://api.example.com/v1/products');
if (fullUrlMatch) {
    console.log('匹配到的API资源:', fullUrlMatch.pathname.groups.resource); // 输出: products
}

URLPattern

/users/:id

URLPattern

:id

*

URLPattern

matchResult.pathname.groups

URLPattern

beforeEach

history

URLPattern.test()

URLPattern.exec()

// 假设你有一个自定义的路由配置
const appRoutes = [
    {
        name: 'home',
        pattern: new URLPattern({ pathname: '/' }),
        component: HomePage,
        // 其他元数据
    },
    {
        name: 'userProfile',
        pattern: new URLPattern({ pathname: '/users/:id' }),
        component: UserProfilePage,
    },
    {
        name: 'notFound',
        pattern: new URLPattern({ pathname: '*' }), // 匹配所有未匹配的路径
        component: NotFoundPage,
    }
];

// 一个简化的自定义路由器核心逻辑
function resolveRoute(currentUrl) {
    for (const route of appRoutes) {
        if (route.pattern.test(currentUrl)) {
            const match = route.pattern.exec(currentUrl);
            return {
                route,
                params: match.pathname.groups,
                query: Object.fromEntries(new URL(currentUrl).searchParams), // 手动解析查询参数
                hash: new URL(currentUrl).hash.substring(1) // 手动解析hash
            };
        }
    }
    // 如果没有任何匹配，可能返回一个默认的404路由
    return {
        route: appRoutes.find(r => r.name === 'notFound'),
        params: {}, query: {}, hash: ''
    };
}

// 在你的应用入口，监听URL变化
window.addEventListener('popstate', () => {
    const resolved = resolveRoute(window.location.href);
    console.log('当前路由:', resolved.route.name, '参数:', resolved.params);
    // 在这里根据resolved.route.component渲染相应的组件
});

// 对于内部链接点击，需要阻止默认行为并手动推送历史状态
document.body.addEventListener('click', (e) => {
    const target = e.target.closest('a');
    if (target && target.origin === window.location.origin && !target.target) {
        e.preventDefault();
        window.history.pushState({}, '', target.href);
        const resolved = resolveRoute(target.href);
        console.log('导航到:', resolved.route.name, '参数:', resolved.params);
        // 渲染组件
    }
});

// 初始化时解析一次
const initialResolved = resolveRoute(window.location.href);
console.log('初始路由:', initialResolved.route.name, '参数:', initialResolved.params);
// 渲染初始组件

URLPattern

resolved.route.component

URLPattern

URLPattern

pathname

protocol

hostname

port

search

hash

// 匹配特定协议、主机名和路径的URL
const adminPanelPattern = new URLPattern({
    protocol: 'https',
    hostname: 'admin.example.com',
    pathname: '/dashboard/:panelId'
});
console.log(adminPanelPattern.test('https://admin.example.com/dashboard/users')); // true
console.log(adminPanelPattern.exec('http://admin.example.com/dashboard/users')); // null (协议不匹配)

baseURL

baseURL

// 定义一个相对于 'https://api.example.com/v1/' 的模式
const apiResourcePattern = new URLPattern('/users/:id', { baseURL: 'https://api.example.com/v1/' });
console.log(apiResourcePattern.test('https://api.example.com/v1/users/456')); // true
console.log(apiResourcePattern.exec('https://api.example.com/v1/users/456').pathname.groups.id); // 456

URLPattern

/items/:id(\d+)/

:param

?

*

+

exec()

groups

URLPattern