前端Routes路由模式设置模式及相应负载配置

前端Routes路由模式设置模式及相应负载配置是我们运维人员必须熟知的技术点，今天我们分享一下：以vue3框架配置路由举例

一、history路由模式

路由模式为history，针对Nginx和Tomcat后端服务器分别提供了相应的重写配置，确保在无文件或目录存在时，正确地重定向到index.html文件

1、vue设置

const router = new VueRouter({

  routes: [

  mode: 'history'  

})

 路由模式一般默认hash，history模式需要后端做相关配置

2、相应ngin配置

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

3、相应tomcat配置

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

4、

二、hash 路由模式