描述下vue-router的工作原理

vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式:

hash:利用URL中的hash（“#”）
history:利用History interface在 HTML5中新增的方法

那么，我们要选择用哪种方式呢？
在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下:

mode 参数：

默认hash
也可选择history
 注：如果浏览器不支持history新特性,则采用hash方式

如果不在浏览器环境则使用abstract（node环境下）

在这里插入图片描述
router/index.js 文件代码

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes'

Vue.use(Router)

export default new Router({
    
    
  // mode: 'history',
  routes
})

那么，经过测试，有什么区别呢？

mode:'hash' ，多了 “ # ”
http://localhost:8080/#/recommend

mode:'history'
http://localhost:8080/recommend

history api可以分为两大部分，切换和修改，参考MDN

切换历史状态

包括back,forward,go三个方法，对应浏览器的前进，后退，跳转操作，有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转：

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

修改历史状态

包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

history.pushState({
    
    color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
    
    
  console.log(event.state)
  if(event.state && event.state.color === 'red'){
    
    
    document.body.style.color = 'red';
  }
}
history.back();
history.forward();

通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。

history模式怕啥

通过history api，我们丢掉了丑陋的#，但是它也有个毛病：

不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

所以，如果你想在github.io上搭一个单页博客，就应该选择hash模式。

描述下vue-router的工作原理

猜你喜欢