目录
1. 什么是路由
路由(英文:router)就是对应关系。
2. SPA 与前端路由
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。
此时,不同组件之间的切换需要通过前端路由来实现。
3. 什么是前端路由
通俗易懂的概念:Hash 地址与组件之间的对应关系。
4. 前端路由的工作方式
- 用户点击了页面上的路由链接
- 导致了 URL 地址栏中的 Hash 值发生了变化
- 前端路由监听了到 Hash 地址的变化
- 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
结论:前端路由,指的是 Hash 地址与组件之间的对应关系!
5. 实现简易的前端路由
步骤1:通过 <component> 标签,结合 comName 动态渲染组件。示例代码如下:
<!-- 通过 is 属性,指定要展示的组件的名称 -->
<components :is="Home"></components>
export default {
data() {
return {
// 在动态组件的位置,要展示的组件的名字,值必须是字符串
comName: 'Home',
};
},
name: 'App',
}
步骤2:在 App.vue 组件中,为 <a> 链接添加对应的 hash 值:
<a href="#/home">首页</a>
<a href="#/movie">电影</a>
<a href="#/about">关于</a>
步骤3:在 created 生命周期函数中,监听浏览器地址栏中hash 地址的变化,动态切换要展示的组件的名称:
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
}
}
},