• Vue路由模式：hash和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);
});

    • 1
    • 2
    • 3
    • 4

    使用：

    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">首页a>
      
    li>
    <li>
      <a href="#/about">关于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 = `
    404
    `    
      }
      // 渲染到页面上
      document.getElementById('routerView').innerHTML = html
    }

    const component = {
      home() {
        return `
    home页面
    `    
      },
      about() {
        return '
    关于页面
    '    
      }
    }


    window.onload = function () {
      routerRender()
    }

    // 事件，监听地址栏中的hash值变化，实现回退
    window.addEventListener('hashchange', routerRender)
      script>

body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5

    使用：

    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">首页a>
    li>
    <li>
      <a href="/about">关于a>
    li>
  ul>

  <div id="routerView">div>

  <script>
    const component = {
      home() {
        return `
    home页面
    `    
      },
      about() {
        return '
    关于页面
    '    
      }
    }

    const routerRender = pathname => {
      let html = ''
      try {
        html = component[pathname]()
      } catch (error) {
        html = `
    404
    `    
      }
      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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    在这里插入图片描述

    优缺点：

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

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

  • 相关阅读:
    HCIA笔记-1 网络基础
    oracle varchar2类型如何转化为date类型
    使用vpn/代理后电脑无法正常上网
    蓝桥杯官网填空题（方格计数）
    pdf 转 word
    C++使用cmake创建项目
    利用生产管理看板系统实现生产线的平衡和优化
    docker（一）：Develop faster. Run anywhere.
    PHP 跟据用户IP获取所在国家高效解决方案（GEOIP）
    031Vue3自引用原生方式实现多级数据展示功能-支持树状、级联等需求
  • 原文地址：https://blog.csdn.net/weixin_45605541/article/details/126902701