浅谈路由模式hash和history的区别

vue-router 中有两种模式：hash模式和history模式

它们之间最直观的区别就是url中/#/的区别

hash

hash值即#后面的值，它默认不会被包括在默认请求中发送给后端
也是其比较重要的优点之一：不会因此重新发送请求，而刷新页面

我们假设 登录页面和hash为/login ,注册页面为/register ,那么我们就可以通过watch来对它进行监听，同时附加一些操作

let vm = new Vue({
 data: {},
 router,
 watch: {
  '$route.path': function (newVal, oldVal) {
   if (newVal === '/login') {
    console.log('欢迎进入登录页面');
   }
   if (newVal === '/register') {
    console.log('欢迎进入注册页面');
   }
  }
 }
})

history

history中则是利用了HTML5中的push State()replace State()方法 其方法注释是操作浏览器的历史记录栈来实现页面的跳转功能，History.back()相当于浏览器的后退功能也等价于History.go(-1)

History.go()相当于浏览器的前进功能，History.go()取值为-1时相当于上一页，取值为1时相当于前进一页

History.pushState()可以将当前页置于浏览器历史记录的栈顶，即最前面

History.replaceState()可以替换掉当前路由

当调用他们修改浏览器历史栈后，虽然当前url改变了，但浏览器不会立即发送请求该url，这就为单页应用前端路由，更新视图但不重新请求页面提供了基础

hash，#后面的数据不会往后台传，刷新只是会请求#前的url，

history，因为都是使用/分开的，会认为是一个完整的url，如果后台没有对应的url，会出现404的情况