vue路由history模式刷新页面出现404问题

时间: 2018-10-12阅读: 1874标签: 404

vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题。但是history模式会出现刷新页面后,页面出现404。解决的办法是用nginx配置一下。 在nginx的配置文件中修改


方法一:

location /{
    root   /data/nginx/html;
    index  index.html index.htm;
    if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
    }


方法二:
vue.js官方教程里提到的https://router.vuejs.org/zh/g...

server {
        listen       8081;#默认端口是80,如果端口没被占用可以不用修改
        server_name  myapp.com;
        root        D:/vue/my_app/dist;#vue项目的打包后的dist
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略 
  }


来源:https://segmentfault.com/a/1190000016653688


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1139

关闭

Vue.js项目在apache服务器部署后,刷新404的问题

原因是vue-router 使用了路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。需要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源

解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面。常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式

网页错误404 not found的解决方法

你是否在使用浏览器打开网页的时候会提示404 not found的情况,导致网页打开失败,留下一大堆英文字母。现小编就和大家介绍XP网页错误404 not found的解决措施。

vue刷新404

利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx。部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会出现404现象!

nginx 配置解决 react 、vue 单页面刷新404问题

单页面简单来说就是访问所有资源路径、其实页面内容只有一个(一般是index.html)。这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件(可以理解为页面片段)进行逻辑处理和页面渲染。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!