当前位置：首页 > VUE

jquery如何实现vue路由

2026-02-20 17:21:36VUE

jQuery 实现类似 Vue 路由的功能

jQuery 本身不提供路由功能，但可以通过结合 History API 和动态内容加载模拟 Vue 路由的效果。以下是实现方法：

监听 URL 变化

使用 window.onpopstate 监听浏览器前进/后退事件，结合 window.location.pathname 获取当前路径：

$(window).on('popstate', function() {
    handleRouteChange(window.location.pathname);
});

动态加载内容

通过 AJAX 或本地模板切换内容，根据路径渲染不同模块：

function handleRouteChange(path) {
    let content = $('#app-content');
    switch(path) {
        case '/home':
            content.load('templates/home.html');
            break;
        case '/about':
            content.load('templates/about.html');
            break;
        default:
            content.html('<h1>404 Not Found</h1>');
    }
}

编程式导航

通过 history.pushState() 修改 URL 而不刷新页面：

$('a[data-route]').click(function(e) {
    e.preventDefault();
    const path = $(this).attr('href');
    history.pushState({}, '', path);
    handleRouteChange(path);
});

初始化路由

页面加载时触发首次路由处理：

$(document).ready(function() {
    handleRouteChange(window.location.pathname);
});

完整示例代码

<div id="app">
    <nav>
        <a href="/home" data-route>Home</a>
        <a href="/about" data-route>About</a>
    </nav>
    <div id="app-content"></div>
</div>

<script>
$(function() {
    // 路由处理函数
    function handleRouteChange(path) {
        const content = $('#app-content');
        switch(path) {
            case '/home':
                content.html('<h2>Home Page</h2>');
                break;
            case '/about':
                content.html('<h2>About Page</h2>');
                break;
            default:
                content.html('<h1>404 Not Found</h1>');
        }
    }

    // 监听导航链接点击
    $('a[data-route]').click(function(e) {
        e.preventDefault();
        const path = $(this).attr('href');
        history.pushState({}, '', path);
        handleRouteChange(path);
    });

    // 监听浏览器前进/后退
    $(window).on('popstate', function() {
        handleRouteChange(window.location.pathname);
    });

    // 初始化
    handleRouteChange(window.location.pathname);
});
</script>