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');