伪静态WordPress/Vue

野生yumeko2025-10-18 6:10

前言：内容来自AI总结，仅供参考。

伪静态通常指的是通过URL重写技术，让动态的URL（如包含.php、.asp等后缀以及查询参数）看起来像静态URL（如.html、.xml等）。这样做的目的主要是为了SEO和美观。

在Vue.js等前端框架中，我们通常使用前端路由（如Vue Router）来实现类似的效果，但原理不同。前端路由是通过HTML5 History API或者hash模式来改变URL，而不需要向服务器发起请求，然后由JavaScript根据路由渲染不同的组件。这种方式有时也被称为"伪静态"，但更准确的叫法是"前端路由"或"单页面应用（SPA）路由"。

但是，之前提到的WordPress中的伪静态是服务器端的URL重写，而Vue中的路由是客户端的。两者目的相似，都是为了美化URL，但实现机制不同。

🔄 服务器端伪静态（WordPress风格）

1、本质：URL重写

bash 复制代码

用户看到的URL（干净）
https://example.com/notes 
https://example.com/api/links

实际访问的文件（隐藏）
https://example.com/index.php?page=notes
https://example.com/api.php?action=links

2、实现方法对比

bash 复制代码

# .htaccess 重写规则
# 把 /notes → /index.php?page=notes
RewriteRule ^notes/?$ index.php?page=notes [L]

# 把 /api/links → /api.php?action=links
RewriteRule ^api/([a-z]+)/?$ api.php?action=$1 [L]

⚡ 前端伪静态（Vue/React中的路由）

1、本质：前端路由

bash 复制代码

// Vue Router 示例
const routes = [
  { path: '/', component: Home },
  { path: '/notes', component: Notes },
  { path: '/links', component: Links }
]

// 用户访问 /notes，但实际还是同一个HTML文件
// 只是JavaScript根据URL显示不同组件

2、两种前端路由模式

Hash模式（兼容性好）

bash 复制代码

# URL带 # 号
https://example.com/#/notes
https://example.com/#/links

# 原理：利用URL hash变化不刷新页面
# 服务器只需要返回同一个HTML

History模式（更干净）

bash 复制代码

# 干净的URL（需要服务器配合）
https://example.com/notes
https://example.com/links

# 原理：使用HTML5 History API
# 需要服务器配置回退到index.html