【Vue | 补洞 | 15】路由和路由器，傻傻分不清

波吉

已于 2022-03-27 10:11:46 修改

阅读量758

点赞数

分类专栏：前端 Vue补洞文章标签： vue.js javascript 前端路由

于 2022-03-23 12:34:06 首次发布

本文链接：https://blog.csdn.net/weixin_42678675/article/details/123682954

版权

前端同时被 2 个专栏收录

71 篇文章 4 订阅

订阅专栏

Vue补洞

22 篇文章 3 订阅

订阅专栏

一个保安的故事，让你再也不混淆路由和路由器！

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>