当前位置：首页 > VUE

vue路由实现hash

2026-02-19 11:03:31VUE

Vue 路由实现 Hash 模式

在 Vue Router 中，Hash 模式是默认的路由模式。它通过 URL 的 hash（即 # 号后的部分）来实现路由切换，不会向服务器发送请求，适合单页应用（SPA）。

启用 Hash 模式

在创建 Vue Router 实例时，默认会使用 Hash 模式。如果需要显式指定，可以设置 mode: 'hash'。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'hash', // 显式启用 Hash 模式
  routes
})

export default router

Hash 模式的特点

URL 中会带有 # 符号，例如 http://example.com/#/about。
改变 URL 的 hash 部分不会触发页面刷新。
服务器不需要任何特殊配置，因为 hash 部分不会被发送到服务器。

监听 Hash 变化

可以通过 window.onhashchange 监听 hash 变化，实现自定义逻辑。

window.onhashchange = function(event) {
  console.log('Hash changed to:', window.location.hash)
}

手动修改 Hash

可以通过 window.location.hash 直接修改 hash，触发路由跳转。

window.location.hash = '/about' // 跳转到 #/about

与 History 模式的区别

Hash 模式兼容性更好，无需服务器支持。
History 模式 URL 更简洁（无 #），但需要服务器配置支持。
Hash 模式适合静态部署，History 模式适合服务端渲染或静态站点生成。

注意事项

避免直接操作 window.location.hash，优先使用 Vue Router 的 router.push 或 router.replace。
Hash 模式对 SEO 不友好，如果需要 SEO 支持，建议使用 History 模式并配置服务器。

通过以上方式，可以轻松在 Vue 项目中实现 Hash 模式的路由管理。

vue路由实现hash

标签: 路由 vue

分享给朋友：

vue前端实现打印功能

使用Vue实现前端打印功能在Vue项目中实现打印功能可以通过多种方式完成，以下是几种常见的方法：使用window.print()方法这是最简单的打印方式，直接调用浏览器的打印功能。 meth…

vue中如何实现循环

在 Vue 中实现循环 Vue 提供了 v-for 指令用于实现循环渲染列表数据。v-for 可以遍历数组、对象或数字范围，生成动态的 DOM 元素。遍历数组使用 v-for 遍历数组时，语法…

vue实现3d宇宙

Vue实现3D宇宙效果使用Three.js库 Three.js是一个强大的JavaScript 3D库，可以轻松集成到Vue项目中。安装Three.js依赖： npm install three…

vue实现通知

Vue 实现通知功能的方法使用 Vue 实现通知功能可以通过多种方式实现，以下是一些常见的方法：使用 Vue 的全局事件总线在 Vue 中可以通过事件总线实现通知功能。创建一个全局事件总线，…

vue实现markdown

Vue 实现 Markdown 编辑器在 Vue 中实现 Markdown 编辑器可以通过集成第三方库或自定义解析器完成。以下是两种常见方法：使用第三方库（如 marked 或 markdow…

vue alert实现

使用 Vue 实现 Alert 组件在 Vue 中实现 Alert 组件可以通过自定义组件或结合第三方库完成。以下是几种常见方法：自定义 Alert 组件创建一个可复用的 Alert 组件，…

vue路由实现hash