HUA
首页/文章/vue

路由hash模式和history模式的实现

2025-03-07
1828 字约 7 分钟
...
学习面试

这篇文章主要介绍了路由的 hash 模式和 history 模式的实现。vue 中的 router 可根据不同 url 展示对应组件。hash 模式中，# 后的内容为 hash 值，变化不引起页面重载，监听 hashchange 事件加载对应组件。history 模式需阻止 a 标签默认行为，用 () 改 url 路径，监听 popstate 事件加载组件。

关联问题: hash模式有何局限 history路由咋优化 路由实现有何难点

1. 前端router是什么

在传统的html编程中，如果想要实现页面能够展示不同页面那么我们就得写很多的html页面来根据url进行展示，但是在vue项目中是一个单页应用的状态，在vue项目中只有一个index.html，所有的页面或者叫组件都是在这个html中展示，而vue中的router就可以实现根据不同url展示对应的组件。

router： 通过url路径来匹配对应的代码块的这么一套机制

router特点：

  1. 修改 url 后，页面要更新
  2. 浏览器不刷新
  3. 如何监听 url 变更

2. hash路由实现

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

当我们在vue项目中配置路由的时候，里面有一个属性叫history，这个属性有两个值其中的createWebHashHistory() 就是我们常说的hash模式，在这个模式中我们的url路径中会多加一个#除此之外与createWebHistory() 并无区别。

在简单回忆了一下router的hash是什么之后，接下来我们来根据router特点和hash模式来自己实现一下router中的hash模式，首先我们需要了解一个小知识点:

#/home 在浏览器的 url 中出现 # 号，#后面的内容会被看作是一个 hash 值，hash 值的变化不会引起页面的重新加载

在我们了解了这一个特点之后，我们就已经完成了router中的修改url之后浏览器不刷新这一特点，接下来我们只需要监听url变更，并且在修改url后页面刷新就行，接下来先给大家展示一下基础的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li><a href="#/home">首页</a></li>
    <li><a href="#/about">关于</a></li>
  </ul>

  <div id="app"></div>

  <script>
    
    const routes = [
      {
        path: '/home',
        component: () => {
          return '<h2>首页页面</h2>'
        }
      },
      {
        path: '/about',
        component: () => {
          return '<h3>about页面</h3>'
        }
      },
    ]
  </script>
</body>
</html>

如果我们想要实现router剩下的两个特点，那么就需要对页面中url的变化进行监听，当页面中的url变化的时候，在页面执行对应的routes[x].component()就可以在页面展示对应的组件。这个功能我们用一个函数routerView(localHash)来实现加载对应路径组件这个功能：

const app = document.getElementById('app')
function routerView(localHash) {
  
  
  const index = routes.findIndex((item) => {
    return '#' + item.path === localHash
  })
  app.innerHTML = routes[index].component()
}

要想实现上述监听url功能，我们就得用官方为我们提供的'hashchange'事件，这个事件可以监听页面中hash值的变化，我们在url中用了#将后面的值变成了hash值，而不同的页面就会展示不同的url就会让hash值进行改变，这样就能通过这个事件来加载对应的组件。


window.addEventListener('hashchange', () => {
  
  routerView(location.hash)
})

同时我们需要在页面完成加载时，就展示对应的组件，完成这个功能才算实现了hash路由，这个功能我们通过官方提供的'DOMContentLoaded'事件来监听页面加载完成，接下来我们来看完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li><a href="#/home">首页</a></li>
    <li><a href="#/about">关于</a></li>
  </ul>

  <div id="app"></div>

  <script>
    const routes = [
      {
        path: '/home',
        component: () => {
          return '<h2>首页页面</h2>'
        }
      },
      {
        path: '/about',
        component: () => {
          return '<h3>about页面</h3>'
        }
      },
    ]
    const app = document.getElementById('app')
    function routerView(localHash) {
      
      
      const index = routes.findIndex((item) => {
        return '#' + item.path === localHash
      })
      app.innerHTML = routes[index].component()
    }

    
    window.addEventListener('DOMContentLoaded', () => {
      routerView(location.hash)
    })
    
    window.addEventListener('hashchange', () => {
      
      routerView(location.hash)
    })

  </script>
</body>
</html>

3. history路由实现

通过上文我们知道了history路由的路径中是没有#的，这样的话我们如果变换路径的时候那就必然会引起页面的刷新，我们实现history路由的时候要避免这一点。

首先我们页面中的基础html结构同上，我们同样需要一个routerView()函数来实现对应url组件加载功能：

const app = document.getElementById('app')
function routerView() {
  const index = routes.findIndex(item => {
    return item.path === location.pathname 
  })
  app.innerHTML = routes[index].component()
}

接下来我们想要实现的效果是点击对应的a标签就展示对应的组件，我们在点击a标签的时候就会进行a标签的默认跳转事件，这个时候我们只需要对要实现router效果的a标签阻止它的默认行为，然后修改url路径后执行routerView()函数即可：

history.pushState() 方法可以修改url，不会带来页面刷新


let linkList = document.querySelectorAll('a')
linkList.forEach(link => {
  link.addEventListener('click', function(e) {
    
    e.preventDefault()
    
    history.pushState(null, '', this.getAttribute('href')) 
    routerView()    
  })
})

在实现了url变更展示对应组件和页面不刷新两点功能之后，还有一个小点得注意一下，当我们点击浏览器左上角前进后退的时候，页面也要展示对应url的组件，仅靠上述代码是实现不了的，这时候我们就需要使用'popstate'事件来实现这个效果，接下来直接给大家展示完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li><a href="/home">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>

  <div id="app"></div>

  <script>
    const routes = [
      {
        path: '/home',
        component: () => {
          return '<h2>首页页面</h2>'
        }
      },
      {
        path: '/about',
        component: () => {
          return '<h3>about页面</h3>'
        }
      },
    ]

    
    window.addEventListener('popstate', function () {
      routerView()
    })

    let linkList = document.querySelectorAll('a')
    linkList.forEach(link => {
      link.addEventListener('click', function(e) {
        
        e.preventDefault()  
        
        history.pushState(null, '', this.getAttribute('href')) 
        routerView()    
      })
    })

    const app = document.getElementById('app')
    function routerView() {
      const index = routes.findIndex(item => {
        return item.path === location.pathname 
      })
      app.innerHTML = routes[index].component()
    }
  </script>
</body>
</html>

总结

hash 路由: #/home 在浏览器的 url 中出现 # 号，#后面的内容会被看作是一个 hash 值，hash 值的变化不会引起页面的重新加载，从而直接监听hashchange事件来判断要展示的对应的组件

history 路由: 首先阻止 a 标签的默认行为，然后使用 history.pushState() 方法来修改 url 路径，它是不会引起页面的重新加载的，在url变更后，读取本地的 pathname 来判断要展示的对应的组件

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →
vue2025-10-22
shallowRef 与 ref 的区别、场景与坑位
结论先行： 会 深度 地把你放进去的对象转成响应式（递归代理），因此"对象内部的改动"也会触发视图更新。 只在 顶层 做依赖追踪： 更换 才触发更新 ；若你只是"在原对象上改属性"，不会触发，除非手动 。 1\. 快速对比 维度 追踪粒度 深度（递归） 仅顶层 对象内部属性变更 会触发更新 不会 触发（除非 或重新赋值） 性能 有递归 & 依赖跟踪开销 更轻量，适合大对象/第三方实例 适用对象 普通标量、普通对象、数组 第三方实例（图表...
学习面试
vue2025-10-20
Vue 3 中的 setup执行时机与异步逻辑详解
Vue 3 中的 执行时机与异步逻辑详解 本文详细介绍 Vue 3 组合式 API 的核心函数 ：它在组件生命周期中的执行时机、异步行为（ 的影响）、常见用法和最佳实践。 一、 的执行时机 是 Vue 3 组件实例创建后、渲染前执行的函数。 它相当于 Vue 2 中的 和 的合体。 执行流程： 也就是说： 所有响应式数据（ 、 、 ）都在这里定义； 所有生命周期钩子（ 、 等）都在这里注册； 模板渲染会等待 执行完成（或异步返回的 Pr...
学习面试
vue2025-10-08
vue中ref与reactive
Vue 3 的 与 ：区别、实现，以及为什么更推荐 1\. 一句话结论 ：适合 原始类型 或 独立、细粒度 的状态单元；类型推断明确、解构安全、追踪粒度更小， 默认首选 。 ：适合管理 对象/集合 这类结构化状态；但 解构会丢失响应性 ， 默认 非深度 ，需要正确的使用姿势配合。 2\. 用法与语义差异 2.1 基本示例 2.2 模板中的解包（unwrapping） 在 模板 里， 会 自动解包 ，可直接写 ，不必 。 在响应式对象中...
学习面试
vue2025-09-23
Vue3 中computed属性依赖总结
Vue3 属性依赖总结 1. 依赖收集机制 的 getter 内部 读取 到哪些响应式变量 ( / )，就会把这些变量收集为依赖。 当这些依赖发生变化时， 会重新计算。 2. 如果只返回常量 始终是 。 修改 或 不会触发 重新计算，因为 getter 内没有访问它们。 3. 如果访问了响应式变量但仍返回常量 初始化时会打印一次。 当 或 改变时，getter 会重新执行（再次打印），因为它们被收集为依赖。 但 依旧始终是 。 4. 总...
学习面试
vue2025-09-17
template标签为什么不可以使用v-show
前言 写 Vue 时，最容易踩的小坑之一，就是给 套一个 。编辑器不报错，页面却“消失”了。很多人以为这是 bug，其实它只是 Vue 的底层设计在默默提醒： 不是真节点，它只是个“草稿纸”。 一、为什么 拒绝 v show 的本质是切换元素的 CSS： 。浏览器要找到真实 DOM 节点，才能给它加样式。而 在运行时会被完全剥离，不会留下任何标签，Vue 找不到节点，也就无处下刀。 举个反面教材： 打开控制台，你会看到 还是生成了，但...
学习面试
vue2025-09-17
Vue 3中watchEffect自动追踪详解
Vue 3 自动追踪详解 一、是什么 是 Vue 3 Composition API 提供的一个响应式副作用（side effect）函数。 它会 立即执行一次回调函数 ，并且在回调函数中访问到的所有响应式数据（ref、reactive、computed 等）都会被 自动追踪 。 当这些依赖的响应式数据发生变化时，回调会重新执行。 简单理解： 能“自动发现”它用到的响应式变量，不需要手动指定依赖。 二、基本用法 特点： 第一次立即执行...
学习面试

评论

请登录后发表评论

去登录
加载评论中...

目录