脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue路由模式

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

 更新时间：2022年09月30日 11:02:33   作者：月光晒了很凉快  
VUE分为两种路由模式分别是hash（哈希）和history，他们的区别是hash模式不会包含在http请求中，并且不会重新加载页面，而使用history模式的话，如果前端的url和后端发起请求的url不一致的话，会报404错误，所以使用history模式的话我们需要和后端进行配合

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路由模式 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

    axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

    这篇文章主要介绍了axios封装使用拦截器处理接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue项目在IE浏览器下运行空白问题及解决

    vue项目在IE浏览器下运行空白问题及解决

    IE11浏览器无法解析ES6语法导致Vue项目在IE11下显示空白,解决方法包括安装babel-polyfill,并在项目的main.js文件中引入babel-polyfill,此外,js-base64版本3及以上不兼容IE11,解决办法是使用版本3以下的js-base64,这些措施可以帮助兼容IE11,确保项目正常运行
    2024-09-09
  • vue项目中引入vue-datepicker插件的详解

    vue项目中引入vue-datepicker插件的详解

    这篇文章主要介绍了vue项目中引入vue-datepicker插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue3 计算属性的用法详解

    Vue3 计算属性的用法详解

    学过 vue2 的宝子们应该都清楚，计算属性这个东西在项目开发过程中使用的还是比较频繁的，使用频率相对来说比较高。本文就来为大家介绍一下Vue3中计算属性的用法，需要的可以参考一下
    2022-07-07
  • Vue.js每天必学之指令系统与自定义指令

    Vue.js每天必学之指令系统与自定义指令

    Vue.js每天必学之指令系统与自定义指令,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Vue常见报错整理大全(从此报错不害怕)

    Vue常见报错整理大全(从此报错不害怕)

    写代码的过程中一定会遇到报错,遇到报错不要担心,认真分析就可以解决报错,同时积累经验,早日成为大牛,这篇文章主要给大家介绍了关于Vue常见报错整理的相关资料,需要的朋友可以参考下
    2022-08-08
  • Vue+Element UI+Lumen实现通用表格分页功能

    Vue+Element UI+Lumen实现通用表格分页功能

    这篇文章主要介绍了Vue+Element UI+Lumen实现通用表格分页功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • Vue3 Element Plus el-form表单组件示例详解

    Vue3 Element Plus el-form表单组件示例详解

    这篇文章主要介绍了Vue3 Element Plus el-form表单组件,Element Plus 是 ElementUI 的升级版，提供了更多的表单控件和功能，同时还改进了一些细节和样式，本文结合示例代码给大家详细讲解，需要的朋友可以参考下
    2023-04-04
  • vue 组件内获取actions的response方式

    vue 组件内获取actions的response方式

    今天小编就为大家分享一篇vue 组件内获取actions的response方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue中的性能优化方案

    Vue中的性能优化方案

    本文主要介绍了Vue中的性能优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论