vue router 原生html,Vue router 使用 History 模式导致页面请求 404
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
复制代码
当你使用 history 模式时,URL 就像正常的 url,例如 yoursite.com/user/id,也好看…
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 oursite.com/user/id 就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
后端配置例子
注意:下列示例假设你在根目录服务这个应用。如果想部署到一个子目录,你需要使用 Vue CLI 的 publicPath 选项 和相关的 router base property。你还需要把下列示例中的根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/ 替换掉 RewriteBase /)。
Apache
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
复制代码
除了 mod_rewrite,你也可以使用 FallbackResource。
nginx
location / {
try_files $uri $uri/ /index.html;
}
复制代码
原生 Node.js
const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" 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)
})
复制代码
#基于 Node.js 的 Express
#Internet Information Services (IIS)
在你的网站根目录中创建一个 web.config 文件,内容如下:
复制代码
#Caddy
rewrite {
regexp .*
to {path} /
}
复制代码
#Firebase 主机
在你的 firebase.json 中加入:
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
复制代码
警告
给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
复制代码
或者,如果你使用 Node.js 服务器,你可以用服务端路由匹配到来的 URL,并在没有匹配到路由的时候返回 404,以实现回退。更多详情请查阅 Vue 服务端渲染文档。
vue router 原生html,Vue router 使用 History 模式导致页面请求 404相关推荐
- 解决Vue的history模式刷新页面出现404的问题
解决Vue的history模式刷新页面出现404的问题 路由的两种工作模式 (一).hash模式 地址中永远带着#号,不美观 若以后将地址通过第三方手机app分享,若app校验严格,地址会被标记为不合 ...
- 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
- nginx导致vue设置history模式下的请求丢失参数
nginx导致vue设置history模式下的请求丢失参数 问题描述: 当访问下面的路径时参数会丢失: http://ip/vuecay/path1/path2?name=cay 演示效果: 可以看到 ...
- vuejs构建的单页面应用history模式子页面微信分享在iOS中遇到的问题
问题描述 在用vuejs做的SPA单页面应用,router模式为history模式,应用是个商城,在进入商品详情页时,第一次进入页面提示签名无效,手动刷新一下就ok,很是烦躁,经过不懈努力,终于解决. ...
- vue路由history模式刷新页面时页面丢失时常见的两种解决方法
方法一: 1 2 3 4 5 6 7 8 location /{ root /data/nginx/html; index index.html index.htm; i ...
- VUE+ElementUi学习记录(一)tabs切换导致页面比例不自适应,包含echarts
问题 element-ui中使用tab切换v-chart,实现自适应布局 解决方案 根本原因,elementui的tab标签切换使用的是display:none; display:none; 这就导致 ...
- Vue项目下IE报错 SCRIPT1003: 缺少 ‘:‘,导致页面空白的解决方案
❝ 今年年初加入了物资团队,遇到的第一个问题就是解决IE的兼容性问题. ❞ 1 现象 当时的情况是IE浏览器在登录系统时,登录页无法加载,页面显示空白,所以也无法访问系统里的其他页面. 2 查看报错 ...
- vue项目在IE浏览器和360兼容模式下页面不显示问题,亲测有效
解决方法:安装 "babel-polyfill"1.命令:cnpm install --save-dev babel-polyfill2.在入口main.js文件引入:import ...
- vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
最新文章
- 滴滴快的精打细算:利用大数据构建产业生态圈
- access 打印预览 代码_PDFFactory pro虚拟打印机下载-PDFFactory官方版下载
- web前端黑客技术揭秘 10.关于防御
- Android 架构 -- Room
- vb.net 弹出对话框 修改按钮名_批量修改日期格式
- node.js 执行php,node.js - 如何利用php执行nodejs文件
- 浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别
- react-native在windows环境下的项目启动
- window部署python项目_Django在Window下的部署
- 再会迪杰斯特拉(Dijkstra)
- MacOS 安装 Telnet
- Float Protocol将于5月7日至10日进行FLOAT代币创世发布
- [探讨java深入的不变模式] java中String类的用法
- 多特蒙德主题本地个人任务清单小demo,你值得尝试!
- concurrent包下线程池类小结
- Java实现POS打印机无驱打印(转)
- 设计模式------享元模式和组合模式
- LeetCode452用最少的箭射爆气球
- 数画-AI绘画-免费的人工智能AI绘画网站
- 阿里云——云迁移中心
热门文章
- Jython安装配置教程(2.7.2)
- java实现apriori算法_用Java实现插入排序算法
- QComboBox样式
- make_shared和shared_ptr的区别
- OPenGL程序导致WM_TIMER消息不能激发
- android expandablelist 自动滚动,在ExpandableListView中,如何保留滚动位置_android_开发99编程知识库...
- Swift--字符串和字符(一)
- 【跟着我们学Golang】Go语言全平台安装
- SUSE各个系统版本安装saltstack方法
- httpHandlers