目录
三个问题了解前端路由
路由(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'
}
}
}