vue-router的两种模式

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中加入

export default new Router({
  mode:'history',
  routes: [
		{
			path: '/home',
			name:'home',
			component:Home
		},
		{
			path: '/login',
			name:'login',
			component:Login
		},
		{
			path: '/video',
			name:'myvideo',
			component:MyVideo
		},
		
  ]
})

但history模式打包后出现页面一片空白的情况,而且没有资源加载错误的报错信息.
1.首先你需要确认页面空白不是由资源文件路径不正确引起的，如果资源找不到就将绝对路径改为相对路径，
2.在资源文件能正常加载的情况下还是空白页面，查看资源加载的路径，我资源加载路径是http://xxx.com/dist，我的是将打包生成的dist文件夹直接放到了public下，没有将dist文件里面的static文件夹和index.html放到public下，所以出现http://xxx.com/dist，后面还有dist,估计是这个原因。
3.如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base

// base: '/history',
// mode: 'history',

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

base: ‘/dist’

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

凡是涉及充值的页面，不能做成带hash路由的的页面！，于是也要用history模式