vue项目的mode:history模式

最近作的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式,通常开发的单页应用的URL都会带有#号的hash模式,由于整个应用自己而言就只有一个HTML,其余的都是经过router来渲染。简单介绍下两种模式:html

  • 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 里看起来确实有些不太美丽。vue

若是不想要很丑的 hash,咱们能够用路由的 history 模式,这种模式充分利用 history.pushState API 来完成URL 跳转而无须从新加载页面。ajax

我最初用的是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官方有解释,须要加一个baseapp

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

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

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

相关文章
相关标签/搜索