原生js 模拟Vue路由切换

    实现原理：进啊听hashchange，hash改变的时候，根据当前的hash匹配相应的html内容，然后用innerHTMl把html内容放进router-view里面

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    9. </head>
    11. <body>
    12.     <div class="container">
    13.         <ul>
    14.             <li><a href="#/">主页</a></li>
    15.             <li><a href="#b">B</a></li>
    16.             <li><a href="#c">C</a></li>
    17.         </ul>
    18.         <div class="viewer">
    19.             这是主页的内容
    20.         </div>
    21.     </div>
    22. </body>
    24. </html>
    26. <style>
    27.     body,
    28.     html {
    29.         width: 100%;
    30.         padding: 0;
    31.         margin: 0;
    32.         height: 100%;
    33.     }
    35.     .container {
    36.         justify-content: center;
    37.         align-items: center;
    38.         font-size: 60px;
    39.         display: flex;
    40.         height: 100%;
    41.         width: 100%;
    43.     }
    45.     .viewer {
    46.         width: 50%;
    47.         height: 20%;
    48.         border: 2px solid red;
    49.         margin-left: 30px;
    50.     }
    51. </style>
    52. <script>
    53.     class Router {
    54.         constructor() {
    55.             this.routes = new Map()
    56.             this.currentUrl = ''
    57.             this.refresh = this.refresh.bind(this)
    58.             window.addEventListener('load', this.refresh, false)
    59.             window.addEventListener('hashchange', this.refresh, false)
    60.         }
    61.         route(path, callback) {
    62.             this.routes.set(path, callback)
    64.         }
    65.         refresh() {
    66.             this.currentUrl = location.hash.slice(1) || '/'
    67.             console.log(this.currentUrl)
    68.             this.routes.get(this.currentUrl)()
    69.         }
    70.     }
    71.     const routes = new Router()
    72.     let viewer = document.querySelector('.viewer')
    73.     routes.route('/', function () {
    74.         viewer.innerHTML = '这是主页面'
    75.     })
    76.     routes.route('b', function () {
    77.         console.log(1)
    78.         viewer.innerHTML = '这是B页面'
    79.     })
    80.     routes.route('c', function () {
    81.         viewer.innerHTML = '这是C页面'
    82.     })
    83.     console.log(routes.routes)
    84. </script>