https://github.com/57code/mini-router
https://github.com/57code/mini-router
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/57code/mini-router
- Owner: 57code
- Created: 2022-03-23T03:43:19.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-03-31T14:15:41.000Z (about 3 years ago)
- Last Synced: 2025-01-10T21:27:34.046Z (5 months ago)
- Language: JavaScript
- Size: 181 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mini-vue-router
小羊们好，这是村长私教课`Vue3全家桶原理及手写`中产出的代码，想要深入学习Vue全家桶原理的小伙伴可以加我vx：`kkb_cunzhang`。
## 分析
以上是`VueRouter`文档上的介绍，我们想要实现自己的`mini-router`，先来看看它都完成了什么任务：
- 将我们的组件映射到路由上
- 让 VueRouter 知道在哪里渲染它们
## 体验
所以我们的代码会像下面这样写：
- router-link负责路由跳转
- router-view告诉知道在哪渲染组件
```Vue
Go to Home |
Go to About
```
还有个问题是上面的url如何映射到组件，于是有了创建路由时的映射表：
```Vue
// router/index.js
// 1. 引入组件
import Home from "../views/home.vue";
import About from "../views/about.vue";
// 2. 定义一些路由：每个路由都需要映射到一个组件。
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About },
];
// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的缩写
});
export default router;
```
最后是如何引入到vue中：
```Vue
// main.js
import router from './router'
createApp(App).use(router).mount('#app')
```
## 思路
经过上面分析，我们大致有了思路：
- 定义一个Vue插件作为载体
- 实现两个组件router-view和router-link
- 实现创建路由实例的createRouter()
- 实现创建执行模式的createWebHashHistory()