vue-router两种模式的区别

参考文献：https://blog.csdn.net/lla520/article/details/77894985/

http://www.javashuo.com/article/p-xjxelpqv-dd.html

https://blog.csdn.net/bujiongdan/article/details/81429927

先后端分离 ===> 利用Ajax，能够在不刷新浏览器的状况下异步数据请求交互。

单页应用（只有一个html文件，整个网站的全部内容都在这一个html里，经过js来处理）不单单是在页面交互是无刷新的，连页面跳转都是无刷新的。为了实现单页应用 ==> 先后端分离 + 前端路由。（更新视图但不从新请求页面）

前端路由实现起来其实也很简单，就是匹配不一样的 url 路径，进行解析，加载不一样的组件，而后动态的渲染出区域 html 内容。

hash模式

#后面 hash 值的变化，并不会致使浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。每次 hash 值的变化，会触发hashchange 这个事件，经过这个事件咱们就能够知道 hash 值发生了哪些变化。而后咱们即可以监听hashchange来实现更新页面部份内容的操做：

hash模式背后的原理是onhashchange事件,能够在window对象上监听这个事件:

window.onhashchange = function(event){
 
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
 
}

 上面的代码能够经过改变hash来改变页面字体颜色。

当你选择mode类型以后，程序会根据你选择的mode 类型建立不一样的history对象(hash:HashHistory 或 history:HTML5History 或 abstract:AbstractHistory)

switch (mode) {
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `invalid mode: ${mode}`)
    }
}

HashHistory有两个方法：HashHistory.push()将新路由添加到浏览器访问历史的栈顶 和 HashHistory.replace()替换掉当前栈顶的路由

 

由于hash发生变化的url都会被浏览器记录（历史访问栈）下来，从而你会发现浏览器的前进后退均可以用了。这样一来，尽管浏览器没有请求服务器，可是页面状态和url一一关联起来。

 

history模式

由于HTML5标准发布，多了两个 API，pushState() 和 replaceState()。经过这两个 API （1）能够改变 url 地址且不会发送请求，（2）不只能够读取历史记录栈，还能够对浏览器历史记录栈进行修改。

除此以外，还有popState().当浏览器跳转到新的状态时，将触发popState事件.

修改历史状态

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

window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)

切换历史状态

包括back,forward,go三个方法，对应浏览器的前进forward，后退back，跳转go操做。   有同窗说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来全部当前窗口的历史记录，从而能够跳转(也许叫跳更合适)：

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

区别：

• 前面的hashchange，你只能改变#后面的url片断。而pushState设置的新URL能够是与当前URL同源的任意URL。
• history模式则会将URL修改得就和正常请求后端的URL同样,如后端没有配置对应/user/id的路由处理，则会返回404错误

当用户刷新页面之类的操做时，浏览器会给服务器发送请求，因此这个实现须要服务器的支持，须要把全部路由都重定向到根页面。

 

history模式怕啥
不怕前进，不怕后退，就怕刷新，（若是后端没有准备的话）,由于刷新是实实在在地去请求服务器的。

在history模式下，你能够自由的修改path。history模式最终的路由都体如今url的pathname中，这部分是会传到服务器端的，所以须要服务端对每个可能的path值都做相应的映射。

当刷新时，若是服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

 

router挂在到根组件

new Vue({
  router
})

此时的router会被挂载到 Vue 的根组件this.$options选项中。在 option 上面存在 router 则表明是根组件。

 

$router与$route的区别

 1. $route从当前router跳转对象里面能够获取name、path、query、params等（<router-link>传的参数由 this.$route.query或者 this.$route.params 接收）

 

2. $router为VueRouter实例。想要导航到不一样URL，则使用$router.push方法；返回上一个history也是使用$router.go方法