JavaScript
搜索
分类

Vue路由模式中的hash和history模式详细介绍

作者：月光晒了很凉快 时间：2024-06-07 15:20:16　

1. 路由概念

路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

SPA(Single Page Application)单页面应用程序,基于前端路由而起：整个网站只有一个页面，通过监听地址栏中的变化事件，来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。

前端路由有两种模式：hash 模式和 history 模式。

2. hash模式

概述：

hash 路由模式是这样的：http://xxx.abc.com/#/xx。 有带#号，后面就是 hash 值的变化。改变后面的 hash 值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次 hash 值发生改变的时候，会触发 hashchange 事件。因此我们可以通过监听该事件，来知道 hash 值发生了哪些变化。

window.addEventListener('hashchange', ()=>{
// 通过 location.hash 获取到最新的 hash 值
   console.log(location.hash);
});

使用：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>hash路由</title>
</head>
<body>
 <ul>
   <li>
     <!-- 通过标签导航  声明式导航 -->
     <a href="#/home" rel="external nofollow" >首页</a>
     <!-- location.href='#/home' js方式进行导航切换 编程式导航 -->
   </li>
   <li>
     <a href="#/about" rel="external nofollow" >关于</a>
   </li>
 </ul>
 <div id="routerView"></div>
 <script>
   const routerRender = () => {
     // 每次都置空hash
     let html = ''
     // 根据地址栏hash值的不同返回对应的资源
     try {
       // 如果hash值为空就给一个home
       let hash = location.hash || '#/home'
       html = component[hash.slice(2)]()
     } catch (error) {
       html = `<div>404</div>`
     }
     // 渲染到页面上
     document.getElementById('routerView').innerHTML = html
   }
   const component = {
     home() {
       return `<div>home页面</div>`
     },
     about() {
       return '<div>关于页面</div>'
     }
   }
   window.onload = function () {
     routerRender()
   }
   // 事件，监听地址栏中的hash值变化，实现回退
   window.addEventListener('hashchange', routerRender)
 </script>
</body>
</html>

Vue路由模式中的hash和history模式详细介绍

注意：hash 模式既可以通过声明式导航，也可以通过编程式导航，上面的案例展示的是声明式导航。而下面将要讲到的 history 模式只能通过编程式导航实现，因为 history 是 js 对象。

优缺点：

优点：hash模式兼容性很强，刷新浏览器，页面还会存在

缺点：地址栏不优雅，有#存在，不利于seo，记忆困难

3. history路由模式

概述：

HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器（bom）的一个接口，在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。

history.pushState({},title,url); // 向历史记录中追加一条记录
history.replaceState({},title,url); // 替换当前页在历史记录中的信息。
window.addEventListener('popstate', function(event) {
 console.log(event)
})

使用：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>history模式</title>
</head>
<body>
 <ul>
   <li>
     <a href="/home" rel="external nofollow" >首页</a>
   </li>
   <li>
     <a href="/about" rel="external nofollow" >关于</a>
   </li>
 </ul>
 <div id="routerView"></div>
 <script>
   const component = {
     home() {
       return `<div>home页面</div>`
     },
     about() {
       return '<div>关于页面</div>'
     }
   }
   const routerRender = pathname => {
     let html = ''
     try {
       html = component[pathname]()
     } catch (error) {
       html = `<div>404</div>`
     }
     document.getElementById('routerView').innerHTML = html
   }
   // history模式，它的路由导航，只能通过js来完成 , history它是js对象
   // 给链接添加点击事件
   document.querySelectorAll('a').forEach(node => {
     node.addEventListener('click', function (evt) {
       // 阻止a标签的默认跳转行为
       evt.preventDefault()
       // 跳转到指定的地址，能回退
       // history.pushState
       // 跳转到指定持址，不能回退
       // history.replaceState
       history.pushState({}, null, this.href)
       // 渲染
       routerRender(this.href.match(/\/(\w+)$/)[1])
     })
   })
   // 在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻渲染 home 中的标签
   window.onload = () => {
     routerRender('home')
   }
   // 回退
   window.addEventListener('popstate', function () {
     routerRender(location.pathname.slice(1))
   })
 </script>
</body>
</html>

Vue路由模式中的hash和history模式详细介绍

优缺点：

缺点：history模式，兼容性较差，刷新页面，页面会404，需要服务器端配置支持

优点：地址栏更优雅，方便记忆，有利于有seo

来源：https://blog.csdn.net/weixin_45605541/article/details/126902701

标签：Vue路由模式,hash,history
0
投稿

猜你喜欢

  • 浅谈MySQL存储引擎选择 InnoDB还是MyISAM

    2009-05-10 20:02:00

  • Python类和对象基础入门介绍

    2022-04-03 12:14:48

  • Django路由层URLconf作用及原理解析

    2023-09-21 13:33:04

  • 基于python实现把json数据转换成Excel表格

    2021-02-20 05:22:04

  • Python正则表达式和元字符详解

    2021-02-26 02:54:19

  • 利用Python为iOS10生成图标和截屏

    2021-05-03 11:15:09

  • 用 ASP 创建 GUID

    2009-04-19 18:43:00

  • Pyecharts 中Geo函数常用参数的用法说明

    2022-06-07 08:35:06

  • Python的MongoDB模块PyMongo操作方法集锦

    2021-02-05 17:59:03

  • 在SQL Server中实现最短路径搜索的解决方法

    2024-01-24 13:47:10

  • Python3解释器知识点总结

    2023-08-02 04:55:38

  • Python如何根据时间序列数据作图

    2022-06-30 01:41:01

  • 解读! Python在人工智能中的作用

    2022-02-20 20:51:54

  • Oracle数据库中表空间的基本管理操作小结

    2024-01-26 23:18:26

  • 当恢复sqlserver bak文件时，原始的用户无法删除的解决方法

    2024-01-15 07:59:00

  • PHP生成sitemap.xml地图函数

    2024-06-05 09:23:16

  • python数据结构之栈、队列及双端队列

    2022-04-08 04:24:14

  • 对Python3 序列解包详解

    2023-06-15 10:39:25

  • python绘制趋势图的示例

    2022-02-28 07:19:18

  • 一键搞定python连接mysql驱动有关问题(windows版本)

    2024-01-18 05:43:29
    • asp之家 网络编程 m.aspxhome.com