vue的路由的两种模式 hash与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 模式。

使用示例

javascript 复制代码
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,你可以使用以下配置:

nginx 复制代码
location / {
  try_files $uri $uri/ /index.html;
}

使用示例

javascript 复制代码
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;

总结

  • Hash 模式:适合不需要服务器支持的简单应用,兼容性好,但 SEO 和用户体验稍差。
  • History 模式:提供更好的 SEO 和用户体验,但需要服务器的支持。

选择哪种模式取决于你的项目需求、目标用户以及服务器环境。如果你需要考虑 SEO,建议使用 history 模式;如果希望快速部署,或者兼容老旧浏览器,可以选择 hash 模式。

您好,我是肥晨。

欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关推荐
知识分享小能手2 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
MC丶科4 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
lijun_xiao20096 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔6 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼6 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔6 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔6 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀6 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP7 小时前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost7 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求