vue路由实现his

vue路由实现his

Vue Router 默认使用 hash 模式，但可以通过配置切换到 history 模式（his），即基于 HTML5 History API 的路由。以下是实现 history 模式的关键步骤：

配置路由模式 在创建 Vue Router 实例时，设置 mode 为 'history'：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

服务器端配置 History 模式需要服务器支持，确保所有路由请求返回 index.html。以下是常见服务器的配置示例：

Nginx：

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

Apache：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

前端部署注意事项

• 确保静态资源路径正确，可通过设置 publicPath 解决。
• 避免直接访问嵌套路由时返回 404，需依赖服务器配置。

处理 404 页面 添加通配符路由捕获未匹配路径：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

开发环境配置 若使用 webpack-dev-server，需设置 historyApiFallback：

devServer: {
  historyApiFallback: true
}

注意事项

• 需要支持 History API 的现代浏览器（IE9 及以下不支持）。
• SEO 友好性优于 hash 模式，但需确保服务器正确配置。
• 生产环境部署时，需清除浏览器缓存以避免旧路由策略冲突。