一个保安的故事,让你再也不混淆路由和路由器!
1. 路由和路由器,傻傻分不清
不讲概念,先讲生活小事
在一栋人才公寓里,保安保管着整栋楼房间的钥匙。每当有领导来检查卫生,保安便得带着整串钥匙逐个开门。领导有时候还会提出过分的要求,说想去对面楼的房间检查。保安一看手里的钥匙,说我这儿没对面楼的钥匙,没辙。
-
路由是什么?
一把钥匙对应一把锁,这一组对应关系,称为路由
。 -
路由器是什么?
管理着多组对应关系的角色,也就是故事里的保安,他承担了路由器
的职责。 -
什么是路由跳转?
领导说:打开这101的门,我要查这间!保安便找到对应的钥匙打开。这个寻找并打开对应的房门的过程,就是 Vue 里路由跳转的过程。 -
为什么要配置路由?
一个保安精力有限,只能管理规定辖区内的房间,因此需要给他配置对应的钥匙,告诉他哪些房间可以开,哪些开不了。
回到前端语境中,来一次小总结:
-
路由是什么?
是一对key-value
关系 -
路由器是什么?
管理多组key-value
的角色 -
什么是路由跳转?
在 Vue 应用中会配置多个路由,当操作者发出指令说要跳转到A页面时,Vue 便去找到该页面对应的组件
,把这个组件给你打开。 -
为何要配置路由?
让路由器确定是否有对应配置的组件可以进行跳转。在跳转前,在路由器配置中寻找要跳转的目的地;若寻得到,则跳转;反之,则说明不存在该配置,无法进行跳转。 -
对于前端路由:一个 key 对应一个组件(如:
student
对应student.vue
组件) -
对于后端路由:一个 key 对应一个回调函数(如:
localhost:8080/student
中的/student
对应某个处理函数的回调)
在 Vue 这种单页面应用中,要实现页面的切换,就需要借助路由器,由它
找到钥匙
,来打开对应组件的"门"
。
2. 用法
1)声明路由
// src/router/index.js
import Home from '...'
import Company from '...'
export default new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/company',
component: Company
},
...
]
})
2)引入路由
// main.js
import router from './router'
new Vue({
router,
render: h => h(App)
})
3)指定跳转 router-link
<template>
<router-link to="home">跳转到home</router-link>
<router-link to="company">跳转到company</router-link>
</template>
4)显示路由跳转后的组件 router-view
// xxx.vue
<template>
<router-link to="home">跳转到home</router-link>
<router-link to="company">跳转到company</router-link>
<!-- 如点了 "跳转到home",则 Home 组件会呈现在 router-view 在位置 -->
<router-view></router-view>
</template>
3. 备注
<router-link>
最终会编译成<a></a>
标签<router-link active-class="xxx">
可指定点击路由时,该标签被激活的样式- 跳转后,“隐藏” 的组件默认
被销毁
,重新显示时会完整地走一遍生命周期函数 $route
: 当前组件配置的路由规则,全局中会有多个$router
:路由器配置,全局只有一个
4. 总结
- 路由是一对
key-value
,路由器管理着多个路由 - 单页面应用的页面切换依赖路由,因此需要配置路由规则
<router-link>
用于点击跳转路由;<router-view>
用于显示跳转后的组件
更多相关文章,推荐阅读来补充知识体系~
【Vue | 补洞 | 16】嵌套路由
【Vue | 补洞 | 17】路由传参 & 路由prop配置
【Vue | 补洞 | 18】编程式路由导航
【Vue | 补洞 | 19】路由守卫