前端路由的两种模式-----Hash模式 ，History模式

⭐ 前言

1、前端路由是什么？

前端路由是在保证只有一个HTML页面的状况下，经过对每一个视图展现形式匹配一个特殊的url来实现所谓的切换效果。不会从新向服务端发送请求，也不会跳转页面。不管是刷新、前进、仍是后退，均可以经过特殊url实现。

---

1-1 SPA

单页web应用（single page web application，SPA）

它只有一个HTML页面。它的核心是更新视图不须要从新请求页面。 所谓的页面跳转，多个页面之间的切换是利用JS动态的变换HTML的内容，加载的时候不是加载整个页面，而是某个指定的容器中的内容。

举栗子：阿呆有一个水壶，刚开始装的是牛奶，过一下子装的是果汁，再过一会又是开水。可水壶仍是一个水壶!

SPA的缺点：

一、没法记住用户的操做记录，

二、且只有一个url，对SEO不友好。

---

🍓前端路由的重要的做用

一、能够在改变url的时候不会向服务器发送请求。

二、能够监听到url的改变。

2、正式开始吧

2-1 hash模式

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    },
    {
      path: '/search',
      name: 'Search',
      component: Search
    }
  ]
})

复制代码

--hash模式下的url

http://localhost:8080/#/
 http://localhost:8080/#/detail/1
复制代码

这里的 hash 就是指 url 后的 # 号以及后面的字符。好比说 "www.baidu.com/#hashhash" ，其中 "#hashhash" 就是咱们指望的 hash 值。 hash 值的变化不会致使浏览器像服务器发送请求，并且hash 的改变会触发 hashChange 事件，浏览器的前进后退也能对其进行控制，因此在 H5 的 history 模式出现以前，基本都是使用 hash 模式来实现前端路由。

2-2 history模式

如下是我我的项目中的页面跳转 history模式

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      name: 'login',
      component: ()=>import('./views/Login.vue'),
    },
    {
      path: '/register',
      name: 'register',
      component: ()=>import('./views/Register.vue'),
    },
    {
      path: '/information',
      name: 'information',
      component: ()=>import('./views/Information.vue'),
    },
    {
      path: '/chat',
      name: 'chat',
      component: ()=>import('./views/ChatView.vue'),
    }
  ]
});
复制代码

login

concacts

在 HTML5 以前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转。

重要）在 HTML5 的规范中，history 新增了如下几个 API：

history.pushState(); // 添加新的状态到历史状态栈

history.replaceState(); // 用新的状态代替当前状态

history.state // 返回当前状态对象

history.pushState() 和 history.replaceState() 的区别?

history.pushState() 在保留现有历史记录的同时，将 url 加入到历史记录中。 history.replaceState() 会将历史记录中的当前页面历史替换为 url。 因为 history.pushState() 和 history.replaceState() 能够改变 url 同时，不会刷新页面，因此在 HTML5 中的 histroy 具有了实现前端路由的能力。

但须要注意的是，history 在修改 url 后，虽然页面并不会刷新，但咱们在手动刷新，或经过 url 直接进入应用的时候， 服务端是没法识别这个 url 的。

由于咱们是单页应用，只有一个 html 文件，服务端在处理其余路径的 url 的时候，就会出现404的状况。 因此，若是要应用 history 模式，须要在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回单页应用的 html 文件。

popstate

在history模式中与hash模式的hashchange对应的是popState。popstate是在浏览器回退前进或者js的 back() go() forward()方法的时候才会触发。

<button @click="$router.go(-1)">返回</button> //返回上一级

<button @click="$router.back()">返回</button> //返回上一级

<button @click="$router.forward()">返回</button> //切换到下一级

那么你们就会有疑问——若是只能经过js的api才能够触发popState, 那pushState和replaceState怎么被popState“注意”到?

答案：能够经过a标签改变url，检测到url发生改变。 大体大代码以下：

⭐ 总结：

hash模式和history模式对比

一、hash 模式相比于 history 模式的优势：

1. 兼容性更好，能够兼容到IE8
2. 无需服务端配合处理非单页的url地址

二、hash 模式相比于 history 模式的缺点：

1. 看起来更丑。
2. 会致使锚点功能失效。
3. 相同 hash 值不会触发动做将记录加入到历史栈中，而 pushState 则能够。