vue项目的mode:history模式

最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题，在此记录一下，Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。简单介绍下两种模式：

• hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
• history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
• 因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由.

使用场景

一般场景下，hash 和 history 都可以，除非你更在意颜值，# 符号夹杂在 URL 里看起来确实有些不太美丽。

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

我最初用的是hash模式，但是hash模式下url需要带“#”符号，不仅看起来不舒服，而且有些场景下是会破坏路由中的"#"（微信分享页面就会把"#"后边的内容处理掉，需要将带参的url作为一个参数传给后台，后台取不到#后面的东西）在后面需要开发微信支付、分享,授权登录等就暴露出了问题，所以就需要使用history模式。只需在router文件夹下的index.js中加入

mode: 'history',

但history模式打包后出现页面一片空白的情况,而且没有资源加载错误的报错信息.

1.首先你需要确认页面空白不是由资源文件路径不正确引起的，如果资源找不到就将绝对路径改为相对路径，我博客中页有记录。

2.在资源文件能正常加载的情况下还是空白页面，查看资源加载的路径，我资源加载路径是http://xxx.com/dist，我的是将打包生成的dist文件夹直接放到了public下，没有将dist文件里面的static文件夹和index.html放到public下，所以出现http://xxx.com/dist，后面还有dist,估计是这个原因。

如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base

1 2	// base: '/history', // mode: 'history',

这个base即为项目路径.我的是在在router文件夹下的index.js加入

base: '/dist'

这是因为router无法找到路径中的组件，所以也就无法渲染了。然后再修改router中的index.js，给每一个component加上name。

3.然后就是后端的配合，在文档中有说明，照着改就好了，https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

接着说一下微信支付，也是因为凡是涉及充值的页面，不能做成带hash路由的的页面！，于是也要用history模式

/*************此处是改成history模式后，但是不能刷新，一刷新，然后就找不到页面，公司要求是要有当前页面的刷新功能，还要有直接通过链接跳转到指定页面的功能，显然history模式是不符合要求的，所以还得用hash模式，改回hash模式后，支付页面竟然可以支付了，应该是微信公众号配置的路径域名后加上了dist,vue项目router文件夹下的index.js加入base: '/dist'的缘故***********/

然后微信公众号支付，前台向服务器端发起ajax请求，服务器端组装支付参数，然后返回给前台，前端发起支付报错，

-1支付缺少参数：appId。

发现WeixinJSBridge.invoke()方法要求传入的是一个对象，并且参数要分开写，不能一个对象传进去，如下

最后微信后台的配置可以看http://www.cnblogs.com/saysmy/p/6780485.html

关于每次点击链接都要刷新页面的问题
众所周知，开发单页应用就是因为那丝般顺滑的体验效果，如果每次点击都会刷新页面…
出现这个的原因是因为使用了window.location来跳转，只需要使用使用router提供的方法，就能够解决这个问题：

在main.js中配置中将router绑定到全局

Vue.prototype.router = router;
之后都使用如下的方式来控制跳转

this.router.push('driver/service');