前台修改路由代码

vue路由修改

在路由配置中添加mode:'history',修改路由为默认使用浏览器历史路由
react和vue去掉路由中# - 图1

react路由修改

替换hashHistory为browserHistory

  1. import { BrowserRouter,Switch, Route,Redirect } from "react-router-dom";
  3. ReactDom.render(
  4.     (<BrowserRouter>
  5.         <Provider store={store}>
  6.             <CookiesProvider>
  7.                 <Route path="/" render={(para)=>Page(para,Main)}/>
  8.             </CookiesProvider>
  9.         </Provider>
  10.     </BrowserRouter>),
  11.     document.body.appendChild(document.createElement('div'))
  12. );

服务器nginx配置

此时在开发环境中路由中已经去掉#可以正常访问了，但打包发布后，点击去其他页面，刷新会报404，此时需要在服务器上配置nginx，访问任何路由地址都访问共用的首页index.html

在location中添加这一行代码try_files $uri $uri/ /index.html;设置网址下的所有地址默认返回index.html

  1. server {
  2.     listen       90; 
  3.     server_name  localhost;
  5.     gzip on; //启用gzip
  6.     gzip_buffers 32 4K; //设置gzip压缩的最小大小
  7.     gzip_comp_level 6; //设置压缩程度
  8.     gzip_min_length 100;
  9.     gzip_types text/css application/javascript image/x-icon image/svg+xml image/jpeg image/gif image/png image/x-ms-bmp; //设置压缩的文件格式，不建议添加图片格式
  11.     location / {
  12.         root   /data/ftp/pub; //设置服务器代码地址
  13.         index  index.html index.htm; //设置默认首页
  14.         try_files $uri $uri/ /index.html;//添加这一行，网址下的所有地址默认返回index.html
  15.     }
  16.     error_page   500 502 503 504  /50x.html;
  17.     location = /50x.html {
  18.         root   /usr/share/nginx/html;
  20.     }
  23. }