vue路由的两种模式怎么实现

# Vue路由的两种模式实现原理详解

## 前言

在现代前端单页应用(SPA)开发中，前端路由是不可或缺的核心功能。Vue Router作为Vue.js官方的路由管理器，提供了两种不同的路由模式：**hash模式**和**history模式**。本文将深入探讨这两种模式的实现原理、差异比较以及实际应用场景，帮助开发者更好地理解和选择适合项目的路由方案。

## 一、前端路由基础概念

### 1.1 什么是前端路由

前端路由是指通过前端技术实现不同页面视图之间的切换和映射，而不需要每次都向服务器发起请求获取新页面。其核心是：

- 监听URL变化
- 匹配路由规则
- 动态渲染对应组件

### 1.2 传统路由与前端路由对比

| 特性         | 传统路由               | 前端路由                  |
|--------------|-----------------------|--------------------------|
| 页面刷新     | 整页刷新              | 局部更新                 |
| 请求方式     | 服务端请求            | 客户端处理               |
| URL表现      | 真实路径              | 可能带有#或虚拟路径      |
| SEO友好性    | 友好                  | 需要特殊处理             |
| 历史记录管理 | 浏览器自动管理        | 需要手动实现             |

## 二、Hash模式实现原理

### 2.1 基本特点

Hash模式利用URL的hash部分（`#`后面的内容）来实现路由，其特点包括：

- 改变hash不会触发页面刷新
- hash变化会触发`hashchange`事件
- 兼容性好，支持所有浏览器

### 2.2 实现机制

#### 核心代码实现

```javascript
class HashRouter {
  constructor() {
    this.routes = {};
    this.currentUrl = '';
    
    // 初始化监听
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
  }
  
  // 注册路由
  route(path, callback) {
    this.routes[path] = callback || function() {};
  }
  
  // 刷新路由
  refresh() {
    this.currentUrl = location.hash.slice(1) || '/';
    this.routes[this.currentUrl]();
  }
  
  // 修改hash
  push(path) {
    window.location.hash = '#' + path;
  }
}

const router = new HashRouter();

router.route('/', () => {
  document.getElementById('app').innerHTML = 'Home Page';
});

router.route('/about', () => {
  document.getElementById('app').innerHTML = 'About Page';
});

// 触发路由变化
router.push('/about');

class HistoryRouter {
  constructor() {
    this.routes = {};
    
    // 初始化监听
    window.addEventListener('popstate', (e) => {
      const path = location.pathname;
      this.routes[path] && this.routes[path]();
    });
  }
  
  // 注册路由
  route(path, callback) {
    this.routes[path] = callback || function() {};
  }
  
  // 路由跳转
  push(path) {
    history.pushState({}, '', path);
    this.routes[path] && this.routes[path]();
  }
  
  // 替换路由
  replace(path) {
    history.replaceState({}, '', path);
    this.routes[path] && this.routes[path]();
  }
  
  // 初始化
  init(path) {
    history.replaceState({}, '', path);
    this.routes[path] && this.routes[path]();
  }
}

const router = new HistoryRouter();

router.route('/', () => {
  document.getElementById('app').innerHTML = 'Home Page';
});

router.route('/about', () => {
  document.getElementById('app').innerHTML = 'About Page';
});

// 初始化路由
router.init('/');
// 跳转路由
router.push('/about');

const router = new VueRouter({
  mode: 'history', // 或 'hash'
  routes: [...]
});

// src/history/hash.js
export class HashHistory extends History {
  // hash模式实现
}

// src/history/html5.js
export class HTML5History extends History {
  // history模式实现
}

// 根据模式选择实现
switch (mode) {
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
}

   location / {
     try_files $uri $uri/ /index.html;
   }

const router = new VueRouter({
  scrollBehavior(to, from, savedPosition) {
    // 返回期望的滚动位置
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: () => import('./Dashboard.vue')
    }
  ]
})