解决Vue history模式下路由跳转时页面404问题

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

后端配置例子

注意：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 Vue CLI 的publicPath 选项和相关的 router base property。你还需要把下列示例中的根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/替换掉 RewriteBase /)。

Apache

<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]
</IfModule>

nginx

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

原生 Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80http.createServer((req, res) => {fs.readFile('index.html', 'utf-8', (err, content) => {if (err) {console.log('We cannot open "index.html" file.')}res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'})res.end(content)})
}).listen(httpPort, () => {console.log('Server listening on: http://localhost:%s', httpPort)
})

解决Vue history模式下路由跳转时页面404问题相关推荐

解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页前言问题分析问题解决结语前言众所周知,Vue路由有两种模式,默认hash模式,这种模式下url上会带"#&q ...
解决 VUE history模式后端配置微信支付目录限制5个等问题
前言作为小公司的WEB开发组组长, 本身为全栈工程师, 主攻方向为PHP. 最近将项目由MVC模式改为了MVVM, 做为小公司的为了节省成本, 招聘了一个新手前端, 编写VUE 新手的技术,无奈并不 ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
nginx导致vue设置history模式下的请求丢失参数
nginx导致vue设置history模式下的请求丢失参数问题描述: 当访问下面的路径时参数会丢失: http://ip/vuecay/path1/path2?name=cay 演示效果: 可以看到 ...
vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目
vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目参考文章: (1)vue-cli3.x正确打包项目,解决静态资源与路由加载无 ...
【新闻系统-React】问题2 antd组件下路由跳转
1.useHistory 1)SandBox组件 import { useHistory } from 'react-router-dom'const history=useHistory()< ...
vue 项目路由跳转时，ie报错缺少')'
vue 项目路由跳转时,ie报错缺少')' 报错信息解决办法报错信息 vue项目中使用了vue-echarts,项目启动后,在chrome上路由跳转没问题,但是在ie的控制台报"缺少 ...
Vue路由跳转时导航栏更新
Vue路由跳转时导航栏更新问题描述在调用函数中跳转路由,但是侧边栏没有更新激活的高亮状态排查查看路由跳转后,侧边栏中active_index的session储存正常由于侧边栏由组件引入,所以 ...
h5 uniapp history模式下刷新页面404
h5 uniapp history模式下刷新页面404 问题:uniapp 的history 把#去掉了,但是当刷新页面的时候出现404 解决方案需要服务端支持如果 URL 匹配不到任何静态资源, ...
解决Carla同步模式下Runtime Error的问题（tick hangs）
解决Carla同步模式下Runtime Error的问题(RuntimeError: time-out of 10000ms while waiting for the simulator, make ...

解决Vue history模式下路由跳转时页面404问题

后端配置例子

解决Vue history模式下路由跳转时页面404问题相关推荐

最新文章

热门文章