Vue-了解前端路由

目录

三个问题了解前端路由

前端路由工作流程

了解前端路由原理——自己实现一个基本的前端路由

---

三个问题了解前端路由

路由（router）是什么？

---router就是对应关系

给我一个路径---我返回一个响应

根据路径来判断应该把该请求分发给哪个模块

谁和谁的对应关系？

单页面应用程序（SPA）与前端路由的一个对应关系

在Vue前端路由中也就是Hash地址与组件的对应关系，我们可以通过location.hash拿到hash地址，根据不同的Hash地址，来对应的显示不同的页面

前端路由和后端路由的区别是什么？

当路径是有前端需要的，然后根据这个路径写的代码或执行的内容，是前端路由

当路径是有后端需要的，然后根据这个路径返回一个响应体，是后端路由

---

前端路由工作流程

用户点击页面上的路由链接（锚链接）

这时会导致URL地址栏中的Hash值发生变化

前端路由立马监听到了Hash地址的变化

前端路由把当前的Hash地址所对应的组件渲染到浏览器中 

---

了解前端路由原理——自己实现一个基本的前端路由

 书写页面路由链接：

<a href="#App">主页</a>
<a href="#Left">Left子页</a>
<a href="#Rigth">Rigth子页</a>
<a href="#Test">Test测试页</a>

 点击可以更改Hash地址

创建动态组件并动态赋值：

<keep-alive>
  <component :is="strRouter"></component>
</keep-alive>

  data () {
    return {
      strRouter: 'Left'
    }
  }

 根据Hash地址的变化更改动态组件：

created () {
    window.onhashchange = () => {
      switch (location.hash) {
        case '#Left':
          this.strRouter = 'Left'
          break
        case '#Rigth':
          this.strRouter = 'Rigth'
          break
        case '#Test':
          this.strRouter = 'Test'
      }
    }
  }