1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>前端路由的基石_history</title>
    6. </head>
    7. <body>
    8.     <a href="http://www.atguigu.com" onclick="return push('/test1') ">push test1</a><br><br>
    9.     <button onClick="push('/test2')">push test2</button><br><br>
    10.     <button onClick="replace('/test3')">replace test3</button><br><br>
    11.     <button onClick="back()">&lt;= 回退</button>
    12.     <button onClick="forword()">前进 =&gt;</button>
    14.     <script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
    15.     <script type="text/javascript">
    16.         // let history = History.createBrowserHistory() //方法一，直接使用H5推出的history身上的API
    17.         let history = History.createHashHistory() //方法二，hash值（锚点）
    19.         function push (path) {
    20.             history.push(path)
    21.             return false
    22.         }
    24.         function replace (path) {
    25.             history.replace(path)
    26.         }
    28.         function back() {
    29.             history.goBack()
    30.         }
    32.         function forword() {
    33.             history.goForward()
    34.         }
    36.         history.listen((location) => {
    37.             console.log('请求路由路径变化了', location)
    38.         })
    39.     </script>
    40. </body>
    41. </html>