前端路由的原理

1、window.onhashchange（监听URLhash） ：当一个窗口的 hash（URL中 # 后面的部分） 的改变时就会触发 hashchange 事件。

2、在hashchange 事件中匹配URL，存在则加载对应的 DOM 元素。

代码如下：

    <a href="#/login">登陆</a>
    <a href="#/register">注册</a>
    <div id="app">
    </div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript">
        var oDiv = document.getElementById('app');
        window.onhashchange = function(){   // 监听 hash地址
            console.log(location.hash);
            switch (location.hash) {
                case '#/login':
                    // statements_1
                    oDiv.innerHTML = '<h2>我是登陆页面</h2>'
                    break;
                case '#/register':
                    // statements_1
                    oDiv.innerHTML = '<h2>我是注册页面</h2>'
                    break;
                default:
                    // statements_def
                    break;
            }
        }
    </script>