# SimulationVueRouter

**Repository Path**: QQXQQ/SimulationVueRouter

## Basic Information

- **Project Name**: SimulationVueRouter
- **Description**: 模拟vue-router
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-26
- **Last Updated**: 2026-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# SimulationVueRouter

模拟 Vue Router 的核心功能实现

## 简介

这是一个用于学习 Vue Router 源码的模拟实现项目。通过手动实现 Vue Router 的核心功能，帮助理解 Vue 路由管理的工作原理。

## 软件架构

```
src/
├── main.js                    # Vue 应用入口
├── App.vue                    # 根组件
├── router/
│   └── index.js              # 路由配置
├── components/               # 页面组件
│   ├── Home.vue
│   ├── About.vue
│   ├── About1.vue
│   └── About2.vue
└── vue-router/               # 模拟的 vue-router 核心实现
    ├── index.js              # VueRouter 类
    ├── components/
    │   ├── RouterLink.js     # RouterLink 组件
    │   └── RouterView.js     # RouterView 组件
    ├── createMatcher.js      # 路由匹配器
    ├── createRouteMap.js     # 路由表创建
    └── history/
        ├── baseHistory.js    # 基础历史记录类
        ├── browserHistory.js # 浏览器历史模式
        └── hashHistory.js    # Hash 模式
```

## 功能特性

- **路由匹配**: 实现路由到组件的映射匹配
- **两种模式**: 支持 Hash 模式和 BrowserHistory 模式
- **RouterLink**: 路由链接组件
- **RouterView**: 路由视图占位组件
- **动态路由**: 支持添加动态路由

## 安装教程

```bash
# 安装依赖
npm install

# 或使用 pnpm
pnpm install
```

## 使用说明

### 1. 配置路由

在 `src/router/index.js` 中配置路由：

```javascript
import { createRouter, createWebHistory, createWebHashHistory } from '../vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../components/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../components/About.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(), // 或 createWebHistory()
  routes
})

export default router
```

### 2. 在 main.js 中使用

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')
```

### 3. 在组件中使用

```vue
<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view />
  </div>
</template>
```

## 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

## License

MIT