SPA 应用路由原理

最新推荐文章于 2022-02-14 20:41:29 发布

Cribug8080

最新推荐文章于 2022-02-14 20:41:29 发布

阅读量138

点赞数

分类专栏： vue js 文章标签： spa路由 hash history

本文链接：https://blog.csdn.net/Cribug8080/article/details/103522898

版权

js 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

history模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button onclick="changeUrl('/changeUrl1')">changeUrl1</button>
  <button onclick="changeUrl('/changeUrl2')">changeUrl2</button>
  <button onclick="history.back()">back</button>
  <button onclick="history.forward()">forward</button>
  <h1>我在监听地址变化: <span id="changeUrl"></span></h1>
  <script>

    window.onpopstate = function(args) {
      document.getElementById('changeUrl').innerHTML = document.location.href
    }

    function changeUrl (url) {
      history.pushState(null, null, url)
    }
  </script>
</body>
</html>

hash模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button onclick="changeHash('changeHash1')">changeHash1</button>
  <button onclick="changeHash('changeHash2')">changeHash2</button>
  <button onclick="history.back()">back</button>
  <button onclick="history.forward()">forward</button>
  <h1>我在监听地址变化: <span id="changeUrl"></span></h1>

  <script>
      window.onpopstate = function(args) {
        document.getElementById('changeUrl').innerHTML = document.location.href
      }
  
      function changeHash (url) {
        location.hash = url
      }
    </script>
</body>
</html>

Cribug8080

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SPA 应用路由原理

history模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
复制链接

扫一扫

专栏目录