vue router 刷新404问题

zilu 发布于2019-08-23 14:34 / 2514人阅读

摘要：问题描述单页面应用的项目，设置模式为。可以跳转但刷新了页面，则显示为。但是这种很丑，也不符合对的使用习惯。所以，需要使用另外一个叫模式来实现跳转而无须重新加载页面。服务器配置服务器配置

1. 问题描述

单页面应用的vue项目，设置router模式为history。可以跳转但刷新了页面，则显示为404。

vue-router的默认hash模式使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。但是这种hash很丑，也不符合对URL的使用习惯。所以，需要使用另外一个叫history模式来实现URL跳转而无须重新加载页面。

export default new Router({
    mode: "history",
    routes: [# other code ]
)}

2. Apache服务器配置


    RewriteEngine On
    RewriteBase /
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]

3. nginx服务器配置

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100802.html

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

摘要：模式下，中存在，用模式就能解决这个问题。但是模式会出现刷新页面后，页面出现。解决的办法是用配置一下。 vue hash模式下，URL中存在#，用history模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。在nginx的配置文件中修改方法一： location /{ root /data/nginx/html...

sanyang 2019-07-25 14:28 评论0 收藏0
VUE-Router按模块配置、懒加载+ Windows中Nginx服务安装、配置解决404

摘要：文章涉及到路由模块化，懒加载，安装，打包配置板块。项目复杂，路由变多，代码维护性降低，从路由模块化开始一步步优化，解决各种。无法启动服务，报错参考资料发现端口冲突，已经在服务中已经配置端口。服务端口更改为。文章涉及到VUE路由模块化，懒加载，nginx安装，打包配置板块。项目复杂，路由变多，代码维护性降低，从路由模块化开始一步步优化，解决各种BUG。参考了很多方法，会在文章中引用出来...

habren 2019-07-25 14:37 评论0 收藏0
vue刷新404

摘要：部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现现象问题原因刷新页面时访问的资源在服务端找不到，因为设置的路径不是真实存在的路径。 1. 问题描述利用vue-route结合webpack编写了一个单页路由项目，运维协助在服务器端配置nginx。部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新...

Euphoria 2019-08-26 18:18 评论0 收藏0
42. Vue、React 等前端项目部署，刷新 404 问题解决方案

摘要：发现路径下是静态文件的目录，不是的目录没有文件，就会规则，返回这样浏览器拿到之后，开始加载其中的前端路由部分这时候就会在前端路由中找到匹配规则同理也可以写在前端路由中了首发于我的github博客, 欢迎关注nginx 匹配的 try_file 与前端路由的优先级问题场景描述: 访问www.abc.com，之后点击界面里面的logout，前端路由处理，跳转到www.abc.c...

caiyongji 2019-07-25 14:38 评论0 收藏0
addRoutes爬坑记

摘要：简介用动态路由实现权限控制，是一个很的方案不是么初始路由只有登录页，根据用户的查询对应的权限，然后，将获取到的菜单数据放入和浏览器缓存中。 addRoutes简介用动态路由实现权限控制，是一个很nice的方案不是么？初始路由只有登录页，根据用户的id查询对应的权限，然后addRoutes，将获取到的菜单数据放入vuex和浏览器缓存中。动态添加更多的路由规则。参数必须是一个符合 r...

draveness 2019-08-22 16:39 评论0 收藏0