当前位置：首页 > jquery

jquery路由

2026-02-03 23:37:49jquery

jQuery 路由的实现方法

jQuery 本身不提供内置的路由功能，但可以通过插件或结合其他库实现前端路由。以下是几种常见的实现方式：

使用 jQuery 配合原生 JavaScript

通过监听 URL 变化或点击事件，动态加载内容：

jquery路由

$(document).ready(function() {
  function loadContent(url) {
    $.get(url, function(data) {
      $('#content').html(data);
    });
  }

  $(window).on('hashchange', function() {
    loadContent(location.hash.slice(1));
  });

  $('a[href^="#"]').click(function(e) {
    e.preventDefault();
    location.hash = $(this).attr('href');
  });
});

使用 jQuery 路由插件

jQuery Router 是一个轻量级路由插件：

jquery路由

$.router = function(routes) {
  var defaultRoute = routes['default'];
  $(window).on('hashchange', route);
  route();

  function route() {
    var url = location.hash.slice(1) || '/';
    var matched = false;

    for(var path in routes) {
      if(path === url) {
        routes[path]();
        matched = true;
        break;
      }
    }

    if(!matched && defaultRoute) defaultRoute();
  }
};

// 使用示例
$.router({
  '/home': function() { $('#content').load('home.html'); },
  '/about': function() { $('#content').load('about.html'); },
  'default': function() { location.hash = '/home'; }
});

结合 History API

现代浏览器支持 History API，可以实现更优雅的路由：

$(document).ready(function() {
  function navigateTo(path) {
    history.pushState({}, '', path);
    loadContent(path);
  }

  function loadContent(path) {
    var page = path.split('/').pop() || 'index';
    $('#content').load(page + '.html');
  }

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

  $('a').click(function(e) {
    e.preventDefault();
    navigateTo($(this).attr('href'));
  });
});

路由参数处理

对于需要处理参数的路由，可以扩展路由功能：

$.router = function(routes) {
  $(window).on('hashchange', route);
  route();

  function route() {
    var hash = location.hash.slice(1);
    var parts = hash.split('/');
    var base = parts[0];
    var params = parts.slice(1);

    if(routes[base]) {
      routes[base].apply(null, params);
    } else if(routes['default']) {
      routes['default']();
    }
  }
};

// 使用示例
$.router({
  'user': function(id) {
    $('#content').load('user.html?id=' + id);
  },
  'default': function() {
    $('#content').load('home.html');
  }
});