前端路由原理

       前端路由的基础是浏览器中的history对象，本地打开的文件没有历史记录,需要在服务器中打开页面才能使用history历史记录对象。history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为 history 是 window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的window 对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的 URL。不过，借由用户访问过的页面列表，同样可以在不知道实际 URL 的情况下实现后退和前进。
      

SPA 与前端路由

SPA

       SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。
       结论：在 SPA 项目中，不同功能页面之间的切换，要依赖于前端路由来完成！

什么是前端路由

路由是根据不同的 url 地址展示不同的内容或页面。

路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。

而在 Web 前端单页应用中，路由描述的是URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。

简单的说，就是在保证只有一个HTML页面，且与用户交互时不刷新和跳转页面的同时，为SPA中的每一个视图展示形式匹配一个特殊的url，在刷新、前进、后退和SEO时均通过这个特殊的url来实现。改变url时不让浏览器向服务器发送请求，而且可以监听到url的变化。

前端路由的兴起就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面来实现的。

通俗易懂的概念：Hash 地址与组件之间的对应关系。

前端路由工作流程

① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

实现简易的前端路由

以下是通过vue来实现的简单路由

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />
    <component :is="comName"></component>
  </div>
</template>

<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

export default {
  name: 'App',
  data() {
    return {
      // 在动态组件的位置，要展示的组件的名字，值必须是字符串
      comName: 'Home'
    }
  },
  // created()方法中，通过window.onhashchange事件，即监听导航栏的地址是否发生变化，
  // 将相应的组件通过动态绑定的方式，更新到component组件中。
  created() {
    // 只要当前的 App 组件一被创建，就立即监听 window 对象的 onhashchange 事件
    window.onhashchange = () => {
      console.log('监听到了 hash 地址的变化', location.hash)
      switch (location.hash) {
        case '#/home':
          this.comName = 'Home'
          break
        case '#/movie':
          this.comName = 'Movie'
          break
        case '#/about':
          this.comName = 'About'
          break
      }
    }
  },
  // 注册组件
  components: {
    Home,
    Movie,
    About
  }
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>