Vue.js 中hash路由和history路由原理及优缺点
hash模式:

原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件
优点:

(1) 只需要前端配置路由表, 不需要后端的参与

(2) 兼容性好, 浏览器都能支持

(3) hash值改变不会向后端发送请求, 完全属于前端路由
缺点:

(1) hash值前面需要加#, 不符合url规范,也不美观

history模式:

原理:
优点:

(1) 符合url地址规范, 不需要#, 使用起来比较美观
缺点:

(1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误

(2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

总结: 一般情况下两种路由的模式都可以使用, 具体的使用场景可以结合以上两种模式的优缺点进行选择.

history/browser

优点

url地址比较优雅，像一个真正的资源地址

缺点

url并不是一个真正的资源地址，直接访问会出现资源404，需要服务端配合做重定向（开发环境，devServer中配置historyApiFallback，线上使用nginx或者apache做404的重定向index.html

hash模式

优点
简单，不需要服务端支持即可以完成路由跳转

缺点
url比较丑，不像一个真正的资源地址

hash只存在于前端页面，用于锚点功能，当服务端往前端跳转地址的时候并不能正确携带hash部分， 导致路由丢失（如微信公众号登陆回跳业务逻辑页面，第三方支付回跳支付详情）

history404重定向解决

#开发环境

module.exports = {

devServer: {

port: 3000,

open: true,

// 404重定向到index.html

historyApiFallback: true

}

}

网页根据不同的路径显示不同的内容，此时就需要路由组件。设置好路由后，可以跳转界面。

路由的两个模式：

history：h5提供的接口，当pushstate修改路径，不会向服务器发送请求，能够像正常路径一样。缺点是服务器需要做处理。

hash：除了多个#之外，最大的好处就是不需要服务器做配置。
动态路由：

访问此页面时可以加入id，
页面代码：
<template>
  <div>
    <h1>Hello</h1>
    <h2>ID:{{$route.params.id}}</h2>
  </div>
</template>

$就是固定找到全局的路由对象的变量名称。
效果：


生命周期：时间的节点。

路由守卫：跳转之前进行判断，如果是VIP用户就可以进入界面，如果不是就跳转到充值界面。
router.beforeEach((to,from,next)=>{
	console.log('跳转之前触发')
	if(to.path == '/lifecom'){
		next('/nopage')
	}else{
		next();
	}
})

<router-link to="/"> 跳转到首页 </router-link>

一、hash

1.  原理：监听onhashchange事件

2. 当url发生变化时，浏览器会记录下来，因此前进后退按钮都可以使用。需要注意的是hash模式下修改的是#后面的内容，使用url的hash来模拟一个完整的url，所以当url改变时，页面不会重新被加载

3. 特点： 能用来构建SPA（单页面引用），改变视图的同事不会向后端发送请求

4. 缺点：url比较丑，如果传复杂的数据，会有体积的限制

5. 能兼容到IE8

二、history

1. 原理：监听onpopstate事件，pushState添加一条新的历史记录，replaceState则会替换当前的历史记录

2. 使用history模式，需要后台的配置支持，因为应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问http://oursite.com/user/id 就会返回404

3. 缺点： history模式中可以实现前进、后退以及跳转，但是刷新的时候是去请求服务器的，如果服务器中没有相应的响应或者资源，就会出现404

4. 只能兼容到IE10

 

PS：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

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