admin管理员组

文章数量:1633829

环境：vue2 、nginx

  • vue history模式，刷新页面404？
    出现的场景： spa应用，在history模式下，路由的变更是前端的浏览器 history.pushState、replaceState进行监听切换的，nginx只会配置入口路径进行访问的时候，能正常切换路由，但是进到其他的路由进行刷新的时候，出现了404。
    原因： 这是因为我们刷新了当前页面（访问页面相当与发起一个get请求），服务器接收到了，就去查找页面，而服务器只配置了一个首页路由，自然是找不到的。我们不可能每个页面都去服务器配置一下路由。
    解决方式： 我们可以在nginx中配置当找不到对应页面的时候，转回首页，这就变向地交给客户端去找路由了，这样本来就存在的路由在刷新的时候就不会再出现404；
  • 只需要在nginx 的.conf文件添加以下配置：
location / {
  try_files $uri $uri/ /index.html;
}

上述配置说明：try_files 去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回；
不存在继续读取第二个变量，如果存在，直接返回；不存在直接跳转index.html

  • 前端配置404页面：当路由找不到的时候，重定向到我们指定的页面，如下，找不到对应的路由时，重定向为“/”,这个路径是我希望用户跳转到不存在的路由的时候，自动重定向过来的页面。
[
  {
    path: '*',
    redirect: '/'
  },
  {
     path: '/',
    name: 'nft',
    component: ()=> import(/* webpackChunkName: 'nft' */ '@/views/nft/index.vue')
    }
 ]

本文标签： 路由模式页面historyvue

版权声明：本文标题：vue history模式，刷新页面404？结合nginx配置路由 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729177907a1188951.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。