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

2024-07-30 13:33:23

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>

注意：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>

优缺点：

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

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

到此这篇关于Vue路由模式中的hash和history模式详细介绍的文章就介绍到这了,更多相关Vue路由模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue3中关于路由hash与History的设置

目录关于路由hash与History的设置 1.history 关键字:createWebHistory 2.hash 关键字:createWebHashHistory 路由中hash和history模式区别 1.hash模式 2.history模式 3.两者对比关于路由hash与History的设置 1.history 关键字:createWebHistory import { createRouter, createWebHistory } from 'vue-router' const
Vue中Router路由两种模式hash与history详解

hash 模式 (默认) 工作原理: 监听网页的hash值变化 -> onhashchange事件, 获取location.hash 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转主要用在单页面应用(SPA) // 模拟原理 // 监听页面hash值变化 window.onhashchange = function(){ // 获取当前url的哈希值 const _hash = locat
Vue中如何把hash模式改为history模式

目录把hash模式改为history模式关于路由hash和history模式 hash模式 history 模式二者对比把hash模式改为history模式如上图所示非常简单只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了关于路由hash和history模式 hash模式 hash 就是指 url 后的 # 号以及后
vue-router中的hash和history两种模式的区别

众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = has
区分vue-router的hash和history模式

一.概念为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义. 前端路由的核心,就在于:改变视图的同时不会向后端发出请求. 为了达到这种目的,浏览器当前提供了以下两种支持: 1.hash--即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算). 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello. 它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中
java中Object类4种方法详细介绍

目录 Object(四大方法): hashCode()方法: equals()方法: getClass()方法: toString()方法: 总结 Object(四大方法): 文章干货满满,耐性看完~~何为Object?首先先来看看官方对Object的介绍:在这里附上Java官方的查阅工具:https://docs.oracle.com/en/java/javase/17/docs/api/index.html 由官方介绍可见,object属于Java.lang包内的一个类,而且提供了很多种方法
JavaScript 中for/of,for/in 的详细介绍

目录在 JavaScript中,for 循环有几种常见的写法第一种最常规的写法: nums = [1,2,3,4] for (let i=0; i<nums.length; i++){ console.log(nums[i]) } 第二种: 第二种 for/of 写法,是ES6开始有的语法, 可以直接迭代出数组中的每个元素,无需通过下标索引位置来获取元素,其实只要是可迭代对象,都可以使用 for/of . for (let item of nums){ console.log(item) }
JavaScript中property和attribute的区别详细介绍

1. 定义 Property:属性,所有的HTML元素都由HTMLElement类型表示,HTMLElement类型直接继承自Element并添加了一些属性,添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className.DOM节点是一个对象,因此,他可以和其他的JavaScript对象一样添加自定义的属性以及方法.property的值可以是任何的数据类型,对大小写敏感,自定义的property不会出现在html代码中,只存在js中.
Node.js中的缓冲与流模块详细介绍

缓冲(buffer)模块 js起初就是为浏览器而设计的,所以能很好的处理unicode编码的字符串,但不能很好的处理二进制数据.这是Node.js的一个问题,因为Node.js旨在网络上发送和接收经常是以二进制格式传输的数据.比如: - 通过TCP连接发送和接收数据: - 从图像或者压缩文件读取二进制数据: - 从文件系统读写数据: - 处理来自网络的二进制数据流而Buffer模块为Node.js带来了一种存储原始数据的方法,于是可以再js的上下文中使用二进制数据.每当需要在Node.j
Java线程中sleep和wait的区别详细介绍

Java中的多线程是一种抢占式的机制,而不是分时机制.抢占式的机制是有多个线程处于可运行状态,但是只有一个线程在运行. 共同点: 1. 他们都是在多线程的环境下,都可以在程序的调用处阻塞指定的毫秒数,并返回. 2. wait()和sleep()都可以通过interrupt()方法打断线程的暂停状态 ,从而使线程立刻抛出InterruptedException. 如果线程A希望立即结束线程B,则可以对线程B对应的Thread实例调用interrupt方法.如果此刻线程B正在wait/sleep/
Swift中的指针操作和使用详细介绍

Apple期望在Swift中指针能够尽量减少登场几率,因此在Swift中指针被映射为了一个泛型类型,并且还比较抽象.这在一定程度上造成了在Swift中指针使用的困难,特别是对那些并不熟悉指针,也没有多少指针操作经验的开发者(包括我自己也是)来说,在Swift中使用指针确实是一个挑战.在这篇文章里,我希望能从最基本的使用开始,总结一下在Swift中使用指针的一些常见方式和场景.这篇文章假定你至少知道指针是什么,如果对指针本身的概念不太清楚的话,可以先看看这篇五分钟C指针教程(或者它的中文版本),应
SQL Server 2008中的数据表压缩功能详细介绍

SQL Server 2005 SP2为我们带来了vardecimal功能,当时针对decimail和numeric数据类型推出了新的存储格式--vardecimal.vardecimal存储格式允许 decimal和numeric数据类型的存储作为一个可变长度列. 这项功能使得原来定长的decimal数据在数据文件中以可变长的格式存储,据称这项功能可以为典型的数据仓库节省30%的空间,而SQL Server 2008在这一基础上又进一步增强了数据压缩功能.SQL Server 2008现在支持
Perl中的特殊内置变量详细介绍

内置变量 $_:先来看一个例子: 复制代码代码如下: #!/usr/bin/perl -w@array = qw(a b c d);foreach (@array) { print $_," ";} 例子的作用就是定义一个数组并把其中的元素打印出来,这里需要注意的是foreach循环部分,foreach循环的标准格式应该是: 复制代码代码如下: foreach $element (@array){ ......} 其中数组@array将其中的元素依次赋值给$element,但是在上

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

目录

1. 路由概念

2. hash模式

3. history路由模式

相关推荐

随机推荐