Vue-Router中的三种路由历史模式详解

news2025/5/31 15:33:19

在最新版的 Vue-Router 中，我们使用createRouter和createWebHashHistory、createwebHistory、createMemoryHistory等方法来配置路由。

下面详细介绍这几种历史记录栈的使用与场景，并结合实际代码说明。

1. createWebHashHistory

原理：

1. 使用 URL 的 hash（#）部分来模拟不同的路径；

2. 这种模式下的 URL 形如：http://example.com/#/path；

3. 因为 hash 部分不会被发送到服务器，所以服务器端不需要特别处理；

实现：

1. Vue-Router 通过监听 window.onhashchange 事件来检测 URL 的变化；

2. 当 hash 值变化时，Vue-Router 会解析 hash 部分并更新视图；

优点：

1. 简单易用，不需要服务器配置；

2. 浏览器支持良好；

缺点：

1. URL 不美观，带有 # 符号；

2. 对 SEO 不友好，因为 hash 不会被搜索引擎索引；

代码示例：

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

2. createWebHistory

原理：

1. 利用 HTML5 History API 中的 pushState 和 replaceState 来管理历史记录；

2. URL 形如 http://example.com/path，没有 # 符号；

3. 这种模式需要服务器支持，因为浏览器在请求 URL 时会直接向服务器发送请求；

实现：

1. Vue-Router 通过监听 window.onpopstate 事件来检测 URL 的变化；

2. 使用 router.push 或 router.replace 方法时会调用 history.pushState 或 history.replaceState 方法改变 URL；

优点：

1. URL 美观，结构清晰；

2. 更加符合现代单页应用的路由需求；

缺点：

1. 需要服务器配置，确保所有路径都指向同一个 HTML 文件，以便客户端路由处理；

服务器配置示例：

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

代码示例：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

3. createMemoryHistory

原理：

1. 这种模式主要用于非浏览器环境，比如 Node.js 服务器端渲染时；

2. 不依赖于浏览器的 History API 或 hash 变化；

实现：

1. Vue-Router 使用内存中存储的路由状态来模拟路由行为；

2. 没有实际的 URL 变化，完全在代码中管理路由状态；

优点：

1. 适用于没有浏览器环境的场景，比如服务器端渲染或自动化测试；

缺点：

1. 只能用于特定场景，不适合普通的前端开发；

代码示例：

import { createRouter, createMemoryHistory } from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
];

const router = createRouter({
    history: createMemoryHistory(),
    routes
});

export default router;

4. 完整示例

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 路由配置在 router.js 文件中

createApp(App).use(router).mount('#app');

// router.js
import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory } from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
];

// 选择不同的历史记录模式
const history = createWebHistory(); // 或者 createWebHashHistory() / createMemoryHistory()

const router = createRouter({
    history,
    routes
});

export default router;

// App.vue
<template>
    <div id="app">
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'App'
};
</script>