仅掌握HTML与Vanilla JS，咨询三类URL配置相关技术问题

1. 移除URL中的.html后缀 #

前端实现方案（纯HTML/原生JS） #

先把页面内所有<a>标签的href写成不带.html的形式（比如href="questions"），再用JS处理内容加载和URL更新：

// 页面内容容器，所有页面内容插入此处
const app = document.getElementById('app');

// 加载指定路径对应的HTML文件
function loadPage(path) {
  const htmlPath = path ? `${path}.html` : 'index.html';
  fetch(htmlPath)
    .then(res => res.ok ? res.text() : Promise.reject())
    .then(html => app.innerHTML = html)
    .catch(() => app.innerHTML = '<h1>404 页面未找到</h1>');
}

// 处理当前URL对应的路由逻辑
function handleRoute() {
  const path = window.location.pathname.slice(1);
  loadPage(path);
}

// 初始化：页面加载时处理当前路由
window.addEventListener('DOMContentLoaded', handleRoute);

// 监听浏览器前进后退动作，同步更新内容
window.addEventListener('popstate', handleRoute);

// 拦截页面内链接点击，用JS更新URL和内容
document.addEventListener('click', e => {
  const link = e.target.closest('a');
  if (link && link.href.startsWith(window.location.origin)) {
    e.preventDefault();
    const url = new URL(link.href);
    window.history.pushState({}, '', url.pathname);
    handleRoute();
  }
});

服务器端辅助配置（可选） #

如果有服务器权限，添加重写规则可避免刷新页面时出现404：

• Apache：在.htaccess中添加

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ $1.html [L]
# 刷新时所有路径指向主页面
RewriteRule ^ index.html [L]

• Nginx：在配置文件中添加

location / {
  try_files $uri $uri.html $uri/ index.html;
}

2. 实现URL嵌套页面（如qyz.com/movies/latest/...） #

这属于前端路由范畴，核心是通过history.pushState更新URL，同时根据路径加载对应内容：

const app = document.getElementById('app');

// 路由映射表：URL路径对应内容加载函数
const routes = {
  '/': () => app.innerHTML = '<h2>首页</h2>',
  '/movies': () => app.innerHTML = '<h2>全部电影</h2><ul><li>电影A</li><li>电影B</li></ul>',
  '/movies/latest': () => app.innerHTML = '<h2>最新电影</h2><ul><li>最新X</li><li>最新Y</li></ul>',
  '/movies/latest/action': () => app.innerHTML = '<h2>最新动作片</h2><ul><li>动作1</li><li>动作2</li></ul>'
};

// 匹配当前路由并加载内容
function handleRoute() {
  const path = window.location.pathname;
  const handler = routes[path] || (() => app.innerHTML = '<h1>404</h1>');
  handler();
}

// 初始化路由系统
function initRouter() {
  handleRoute();
  window.addEventListener('popstate', handleRoute);
  document.addEventListener('click', e => {
    const link = e.target.closest('a');
    if (link && link.href.startsWith(window.location.origin)) {
      e.preventDefault();
      const url = new URL(link.href);
      window.history.pushState({}, '', url.pathname);
      handleRoute();
    }
  });
}

window.addEventListener('DOMContentLoaded', initRouter);

注意：刷新页面时需要服务器将所有路径指向主页面（比如index.html），否则会返回404，配置参考上一个问题的服务器部分。

3. 配置URL中的变量 #

方式一：路径参数（如/movies/2022-english-action） #

1. 解析路径中的参数：

function parsePathParams(path) {
  const paramStr = path.replace('/movies/', '');
  const [year, lang, genre] = paramStr.split('-');
  return { year, lang, genre };
}

// 使用示例
const params = parsePathParams('/movies/2022-english-action');
// params = { year: '2022', lang: 'english', genre: 'action' }

2. 动态匹配带参数的路由：

const routes = [
  {
    path: /^\/movies\/(\d+)-(\w+)-(\w+)$/,
    handler: (matches) => {
      const [year, lang, genre] = matches;
      app.innerHTML = `<h2>${year}年 ${lang} ${genre}电影</h2>`;
      // 此处可根据参数筛选电影数据并渲染列表
    }
  },
  // 其他路由规则...
];

function handleRoute() {
  const path = window.location.pathname;
  let matched = false;
  for (const route of routes) {
    const matches = path.match(route.path);
    if (matches) {
      route.handler(matches.slice(1));
      matched = true;
      break;
    }
  }
  if (!matched) app.innerHTML = '<h1>404</h1>';
}

方式二：查询参数（如/movies?v=2022&lang=english&genre=action） #

1. 解析查询参数：

function parseQueryParams() {
  const searchParams = new URLSearchParams(window.location.search);
  return {
    year: searchParams.get('v'),
    lang: searchParams.get('lang'),
    genre: searchParams.get('genre')
  };
}

// 使用示例
const params = parseQueryParams();
// params = { year: '2022', lang: 'english', genre: 'action' }

2. 生成带查询参数的URL：

function applyFilters(year, lang, genre) {
  const searchParams = new URLSearchParams();
  searchParams.set('v', year);
  searchParams.set('lang', lang);
  searchParams.set('genre', genre);
  const newUrl = `/movies?${searchParams.toString()}`;
  window.history.pushState({}, '', newUrl);
  // 加载筛选后的内容
  app.innerHTML = `<h2>${year}年 ${lang} ${genre}电影</h2>`;
}

内容的提问来源于stack exchange，提问作者Khaled