当前位置：首页 > 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

分享给朋友：

vue实现选区

Vue 实现选区的基本方法在Vue中实现选区功能通常涉及DOM操作和事件处理。以下是几种常见的方法：使用原生JavaScript的Selection API 通过window.getSelec…

实现简易vue

实现简易 Vue 的核心思路 Vue 的核心功能包括数据响应式、模板编译和虚拟 DOM。以下是一个简易实现方案，涵盖核心功能模块。数据响应式系统通过 Object.defineProperty…

vue实现滑块

Vue 实现滑块组件的方法使用原生 HTML 和 Vue 指令通过 Vue 的 v-model 和事件监听实现基础滑块功能。创建一个包含 input 元素的组件，类型设置为 range，并绑定到…

vue tab实现

Vue Tab 实现方法使用动态组件实现 Tab 在 Vue 中可以通过动态组件 <component :is="currentTab"> 结合 v-for 和 v-bind 实现 Ta…

vue 实现打印

Vue 实现打印功能的方法在Vue项目中实现打印功能，可以通过以下几种方式实现：使用window.print()方法通过调用浏览器的原生打印API实现基础打印功能，适用于简单内容打印。 //…

vue实现tree

Vue 实现 Tree 组件使用 Vue 实现 Tree 组件可以通过递归组件的方式来实现层级结构展示。以下是一个完整的实现方法：基础递归组件实现创建 Tree 组件文件 Tree.vue，使…

vue实现hash路由