Vue Router Hash模式和Html 5模式的区别

html5 mode 和 hash mode 是 Vue Router 两种不同的导航模式。它们的主要区别是:

html5 mode:

• 使用 history API 实现路由导航
• URL 会在浏览器正常显示为 /some/path
• 需要服务器端支持,否则会刷新页面
• 美观简洁的 URL,利于 SEO

hash mode:

• 使用 URL hash 实现路由导航
• URL 会包含 hash,例如 /some/path#hash
• 不需要服务器端支持,兼容性更好
• 不利于 SEO,URL 中的 hash 会被忽略

选择不同的模式

• router/index.js

import { createRouter, createWebHistory } from 'vue-router'

export const routes = [
  { path: '/', component: Home },
  // ...
]


const router = createRouter({
  history: createWebHistory(),  // 此处启用html了模式
  routes 
})

nginx 配置

刚刚提及到html 5模式下，需要服务器支持。最常用的当然是nginx.

为什么需要服务器支持呢？

这是因为 html5 模式使用 history API 实现路由导航,服务器需要正确响应 404 (Not Found) 请求,并将其重定向到 index.html。

server {
  listen 80;
  root /app/dist;
  
  location / {
    try_files $uri $uri/ /index.html;
  }
}  

这会将所有的请求重定向到 index.html,由 vue-router 解析和匹配路由。如果没有这个配置,用户直接通过 URL 访问 /some/path,会返回 404 而不是应用的页面。

它的作用是:

• 先找是否有匹配 $uri 的文件
• 如果没有,再找是否有匹配 $uri/ 的目录
• 如果依然没有,则重定向到 /index.html

这就是 vue-router 在 html5 模式下所需要的配置, 就是将所有的未匹配请求都重定向到 /index.html,由 vue-router 在前端完成匹配和渲染。