1. <body>
    2.     <a href="http://www.baidu.com">百度</a> <br>
    3.     <a href="javascript:;">js实现</a> <br>
    4.     <a href="#">点击会在url后追加#,不刷新页面</a> <br>
    5.     <!-- vue路由的原理: a标签请求时, 如果请求地址以#开头, 则页面不刷新 -->
    6.     <a href="#/main">主页</a> |
    7.     <a href="#/login">登录页</a> |
    8.     <a href="#/user">个人页</a>  <br>
    9.     <!-- #相当于省略了当前文件url路径, 所以完整的写法如下 -->
    10.     <!-- 127.0.0.1 本机 -->
    11.     <a href="http://127.0.0.1:5500/3,vue%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86.html#/main">主页</a> |
    12.     <a href="http://127.0.0.1:5500/3,vue%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86.html#/login">登录页</a> |
    13.     <a href="http://127.0.0.1:5500/3,vue%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86.html#/user">个人页</a> 
    14.     <!-- a标签的请求url中如果只是#后的路径发生变化, 页面不会刷新 -->
    15.     <!-- 在url地址中以#开头的路径叫 hash值 (哈希值)  如  #/user  -->
    16.     <h1 id="h1"></h1>
    17.     <script>
    18.         //当网页url地址中的hash值(#开头的路径)变化时, 会触发hashchange这个事件
    19.         window.onhashchange = function(){
    20.             // 使用location.hash获取当前页面的hash值
    21.             console.log(location.hash);
    22.             // 通过判断hash值,渲染不同的组件/标签(路由分发)
    23.             if(location.hash == "#/main"){
    24.                 h1.innerText = "这是主页内容"
    25.             }else if(location.hash == "#/login"){
    26.                 h1.innerText = "这是登录页内容"
    27.             }else if(location.hash == "#/user"){
    28.                 h1.innerText = "这是用户页内容"
    29.             }
    30.         }
    31.         // vue路由实现了在不刷新整个页面的前提下,实现了页面局部数据更新
    33.         // vue路由把上边的逻辑进行了封装, 更简洁方便
    36.     </script>
    38. </body>