vue-router使用history模式配置说明
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: ‘history’,
routes: […]
})
当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
#后端配置例子
注意:下列示例假设你在根目录服务这个应用。如果想部署到一个子目录,你需要使用 Vue CLI 的 publicPath 选项 (opens new window)和相关的 router base property (opens new window)。你还需要把下列示例中的根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/ 替换掉 RewriteBase /)。
nginx
location / {
try_files $uri $uri/ /index.html;
}
可能有些同学配置了nginx后,但是刷新页面后控制台报下面的错误:
Uncaught SyntaxError: Unexpected token <
如果是通过vue-cli脚手架创建的项目,请检查vue.config.js
文件中的publicPath是否配置正确
如果是自己手动搭建的Webpack打包,确认assetsPublic的配置,将 ./
修改为 /
https://forum.vuejs.org/t/uncaught-syntaxerror-unexpected-token/32862/18
vue-router使用history模式配置说明相关推荐
- 解决vue router使用 history 模式刷新后404问题
因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是 ...
- vue router 原生html,Vue router 使用 History 模式导致页面请求 404
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- 面试考问Vue Router 的路由模式,这个回答令我直接出局!
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- 你真的理解 Vue Router 的路由模式吗?
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- 面试考问Vue Router 的路由模式,这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- vue react 路由history模式刷新404问题解决方案
vue react 路由history模式刷新404问题解决方案 参考文章: (1)vue react 路由history模式刷新404问题解决方案 (2)https://www.cnblogs.co ...
- vue router中hash模式和history模式的区别
面试问答 hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- 每天一点点之vue框架开发 - History 模式下线上路由报404错误
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- Vue路由history模式踩坑记录:nginx配置解决404问题
问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...
最新文章
- android mediaplayer状态机
- 【Python-ML】神经网络-深度学习库Keras
- Hi3516A开发--USB PCB 设计建议
- Django:序列化的几种方法
- 他是绝世天才,却只开了半辈子的挂!死后惨遭封号200年,这就是和牛顿抬杠的下场.........
- java 8 lambda_Java 8 Lambda演练
- DATEDIFF 函数使用
- windows 映射文件会释放内存吗_Windows系统共享内存管理
- Evaluation or Assessment
- spring-boot (9)---STS 新建一个spring-boot rest 项目
- 微软MED-V虚拟化实战教程之二映像准备和测试
- html+默认ie11,IE11浏览器怎么设置默认浏览器
- 十大靠谱“计算机视觉数据集”榜单
- 计算机网络——tcpdump/Wireshark抓包实战
- python 降序排列
- mac更新系统后xcode-select --install使用问题
- 云宏WinCloud助力银行业务快速入云
- java反射机制是什么_java中的反射机制是什么?
- Java面试手写编程题(面试官经常让人手写)
- signature=5cb1209670cd93d97d200f9cc5f1d775,Tunable THz generalized Weyl points
热门文章
- [转] *** 一键安装脚本(四合一)
- 基于pyhton3.6-机器学习实战-支持向量机SVM代码解释
- 计算 1! + 2! + 3! + 4! +... + 10! 说明:4! 表示4的阶乘。4的阶乘是:1 * 2 * 3 * 4
- 梳理|对话系统中的DST
- short 在JAVA_short在java中是什么类型的
- 如何破解Charles4.0.1------超级简单
- 【Git】如何进行分支合并
- On saturday
- android Zxing二维码之读取手机二维码图片
- IDEA2019.1.1破解(亲测有效)