Vue了解前端路由

目录

三个问题了解前端路由

前端路由工作流程

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

路由（router）是什么？

---router就是对应关系

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

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

谁和谁的对应关系？

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

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

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

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

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

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

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

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

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

 书写页面路由链接：

主页 Left子页 Rigth子页 Test测试页

 点击可以更改Hash地址

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

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' } } }