美文网首页
vue2-history模式

vue2-history模式

作者: 念念璇语 | 来源:发表于2018-12-04 17:06 被阅读0次

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

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

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

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

注意:

修改config文件下index.js

后端配置例子

Apache

nginx

原生 Node.js

HTML5 History 模式 | Vue Router

相关文章

  • vue2-history模式

    HTML5 History 模式 vue-router默认 hash 模式 —— 使用 URL 的 hash 来模...

  • JS 设计模式

    工厂模式 单体模式 模块模式 代理模式 职责链模式 命令模式 模板方法模式 策略模式 发布-订阅模式 中介者模式 ...

  • iOS设计模式

    设计模式:MVC模式、单例模式、观察者模式、工厂模式、代理模式、策略模式、适配器模式、模版模式、外观模式、创建模式...

  • iOS知识点总结

    一、设计模式:MVC模式、单例模式、观察者模式、MVVM模式、工厂模式、代理模式、策略模式、适配器模式、模板模式、...

  • 常用设计模式 2018-09-15

    目录 代理模式 单例模式 命令模式 工厂模式 桥接模式 策略模式 装饰模式 观察者模式 门面模式 代理模式 静态代...

  • 计算机等级考试三级数据库复习(五)

    1.数据库系统 三级模式——》内模式,模式,外模式 二级映像模式(外模式/模式,模式/内模式) 模式/内模式提供数...

  • Retrofit源码解析

    设计模式:建造者模式、工厂方法模式、外观模式、代理模式、单例模式、策略模式、装饰模式、适配器模式、代理模式 一、R...

  • GOF23(java设计模式)--行为型模式

    职责链模式、迭代器模式、中介者模式、命令模式、解释器模式、访问者模式、策略模式、模版方法模式、状态模式、观察者模式...

  • vim学习 02——模式

    vim学习 02——模式 基本模式普通模式插入模式可视模式选择模式命令行模式Ex 模式 派生模式操作符等待模式插入...

  • 互联网营销与促销模式

    互联网营销与促销模式:众筹模式 团购模式 秒杀模式 满赠模式 积分模式 软文模式 会员模式 抽奖模式 体验模式 拍...

网友评论

      本文标题:vue2-history模式

      本文链接:https://www.haomeiwen.com/subject/hclvcqtx.html