当前位置：首页 > VUE

vue实现hash路由

2026-03-29 03:23:05VUE

Vue 实现 Hash 路由

Vue 可以通过 vue-router 或原生方式实现 Hash 路由。以下是两种方法的详细步骤：

使用 `vue-router` 实现

安装 vue-router：

npm install vue-router

创建路由配置文件：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

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

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

export default router

在 main.js 中引入路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

在组件中使用路由：

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</template>

原生方式实现 Hash 路由

监听 hashchange 事件：

window.addEventListener('hashchange', () => {
  const hash = window.location.hash.slice(1) || '/'
  console.log('Current hash:', hash)
})

动态渲染组件：

<template>
  <component :is="currentComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'Home'
    }
  },
  created() {
    window.addEventListener('hashchange', this.updateComponent)
    this.updateComponent()
  },
  methods: {
    updateComponent() {
      const hash = window.location.hash.slice(1) || '/'
      this.currentComponent = hash === '/about' ? 'About' : 'Home'
    }
  },
  beforeUnmount() {
    window.removeEventListener('hashchange', this.updateComponent)
  }
}
</script>

手动更新 Hash：

vue实现hash路由

// 跳转到 About 页面
window.location.hash = '/about'

注意事项

Hash 路由通过 # 实现，不会触发页面刷新。
vue-router 提供了更多功能如导航守卫、动态路由等。
原生方式适合简单场景，复杂项目建议使用 vue-router。

标签: 路由 vue

分享给朋友：

django vue实现

Django与Vue.js整合实现方案 Django作为后端框架与Vue.js作为前端框架的整合，可以通过以下方式实现：分离式开发前后端完全分离，Django仅提供API接口，Vue.js通过a…

vue实现tag

Vue 实现标签（Tag）功能在 Vue 中实现标签（Tag）功能可以通过多种方式完成，以下是一些常见的方法和实现步骤：使用动态组件和 v-for 通过 v-for 指令动态渲染标签列表，结合样…

vue grid实现

Vue Grid 实现方法在 Vue 中实现网格布局可以通过多种方式完成，包括使用原生 CSS Grid、第三方组件库或自定义组件。以下是几种常见方法：使用原生 CSS Grid 通过 Vue…

vue实现markdown

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

vue实现hover

Vue 实现 hover 效果的方法在 Vue 中实现 hover 效果可以通过多种方式实现，包括使用 CSS、Vue 指令或事件监听。以下是几种常见的方法：使用 CSS :hover 伪类通…

vue 全景实现

Vue 全景实现方案在Vue中实现全景效果，通常需要结合WebGL或第三方库来处理3D场景渲染。以下是几种常见方法：使用Three.js库 Three.js是一个强大的WebGL库，适合创建3D…

vue实现hash路由