当前位置：首页 > article >正文

vue的路由的两种模式 hash与history 详细讲解

article 2024/11/4 18:08:42

在这里插入图片描述

文章目录

- 1. Hash 模式
- - 工作原理
  - 优点
  - 缺点
  - 使用示例
- 2. History 模式
- - 工作原理
  - 优点
  - 缺点
  - 服务器配置示例
  - 使用示例
- 总结

Vue Router 是 Vue.js 的官方路由管理器，它支持多种路由模式，其中最常用的两种是 hash 模式和 history 模式。下面我们详细讲解这两种模式的特点及使用场景。

1. Hash 模式

工作原理

Hash 模式是基于 URL 的 hash（锚点）部分实现的，所有的路由都以 # 开头，浏览器不会向服务器发送 hash 后面的内容。URL 的变化只会影响 hash 部分，适合用于不需要服务器支持的简单应用。

示例 URL：

http://example.com/#/home

优点

兼容性好：Hash 模式在所有浏览器中都得到了广泛支持，包括 IE9 及更早的版本。
无需服务器配置：由于 hash 不会被发送到服务器，应用可以直接运行在任何静态服务器上。

缺点

SEO 不友好：搜索引擎一般无法抓取 hash 后面的内容，可能会影响 SEO。
用户体验差：浏览器的后退和前进按钮不够直观，用户体验上略逊于 history 模式。

使用示例

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';

Vue.use(Router);

const router = new Router({
  mode: 'hash',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: () => import('./components/About.vue') },
  ]
});

export default router;

2. History 模式

工作原理

History 模式是利用 HTML5 的 History API 来实现的，允许你在不重新加载页面的情况下改变 URL。URL 中不会有 hash，路由看起来更干净。

示例 URL：

http://example.com/home

优点

SEO 友好：由于 URL 中不包含 hash，搜索引擎能够更好地抓取页面内容。
更好的用户体验：URL 更美观，符合用户的直觉，后退和前进按钮的行为也更自然。

缺点

需要服务器支持：需要进行服务器配置，确保刷新页面时，服务器返回的是应用的入口 HTML 文件，而不是 404 错误。

服务器配置示例

对于常见的静态服务器，如 Nginx，你可以使用以下配置：

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

使用示例

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: () => import('./components/About.vue') },
  ]
});

export default router;