HTML5 History模式

项目中我用的是history模式。

默认 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 依赖的页面。

后端配置例子

nginx

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

Apache

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>  

vue,一路走来(11)--HTML5 History模式的更多相关文章

  1. nginx 配置支持URL HTML5 History 模式 与 设置代理

    拾人牙慧:https://segmentfault.com/q/1010000007140360 nginx 配置支持URL HTML5 History 模式 location / { try_fil ...

  2. Vue HTML5 History 模式

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  3. HTML5 History 模式

    vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  4. vue,一路走来(13)--vue微信分享

    vue微信分享 今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 ...

  5. vue,一路走来(1)--构建vue项目

    2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...

  6. vue-router HTML5 History 模式(转自官网)

    vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  7. Vue之八 HTML5 History模式

    nginx配置 location / { root /webroot/www/ShopMall3; try_files $uri $uri/ /index.html; } /:访问路径: root:服 ...

  8. Vue 编程式导航,路由history模式

    import Vue from 'vue' import App from './App.vue' import Home from './components/Home.vue' import Ne ...

  9. vue,一路走来(2)--路由vue-router

    安装 Mint UI cnpm install mint-ui --save 如果你的项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入.此时需要在入口文件 main.js 中: ...

随机推荐

  1. MS AX 技术相关网站收藏

    Microsoft Dynamics AX Developer Centerhttps://msdn.microsoft.com/en-us/dynamics/ax/default.aspx From ...

  2. bxSlider 在网页里添加幻灯片效果

    幻灯片效果在网页上很常见,本文介绍用 bxSlider 轻松实现的方法. bxSlider是什么 bxSlider 是用 JQuery 和 CSS 实现网页中幻灯片效果的工具.可在 http://bx ...

  3. Arduino小车学习与研究

    信安系统设计基础实践模块 Arduino小车学习与研究 ================== 陈都(20135328) 余佳源(20135321) 莫凡(20135225) ---------- 索引 ...

  4. Windows Server 2008安装Memcached笔记

    分布式缓存系统Memcached简介与实践 缘起: 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然 ...

  5. 获取json对象的长度

    获取json对象的长度跟获取一个普通对象或数组的方法不一样,json对象没有length属性,不能直接用.length直接获得. function getJsonLength(json){ var j ...

  6. html拼接数据的时候一定要注意null值的问题

    后台会返回null文本  如果直接拼接 不仅仅格式问题 前台会显示null   如果是图片  用fiddle抓取 还会发现你请求了一个带域名/null的接口     所以要把null格式化为空文本

  7. Ubuntu+Django+Nginx+uWSGI+Mysql搭建Python Web服务器

    Ubuntu+Django+Nginx+uWSGI+Mysql搭建Python Web服务器 闲着无聊的时候部署了一个Django项目玩,用vm虚拟机部署的. 准备工作 我使用的系统是Ubuntu16 ...

  8. 对XML里的属性或元素进行模糊搜索的方法

    最近发现几个贴子都是问关于对XML的属性或元素进行模糊搜索的方法,在此发出代码片段示例,希望能够对你有所帮助:) 示例XML private var xml:XML=<employees> ...

  9. iOS ----------如何修改mac的host文件

    第一步:前往文件夹 或者 按快捷键组合 Shift+Command+G 三个组合按键. 第二步:前往/private/etc/      找到Hosts 文件   复制到桌面    修改  然后  保 ...

  10. vue.config.js初始化配置

    let path = require('path')function resolve (dir) { return path.join(__dirname, dir)} module.exports ...