vue-router 的 hash模式

109 阅读1分钟

看源码是多么伟大又无聊的事情,可惜看不懂,不如听个课,记个笔记

hash模式

<body>
    <div>
        <!-- 相当于router-link -->
        <a href="#/">首页</a>
        <a href="#/user">用户</a>
        <a href="#/cart">购物车</a>
    </div>
    <!-- 相当于router-view -->
    <div id="view"></div>
    <script>
        var router = {
            // 定义路由表
            routes: {},
            route(path, cb) {
                this.routes[path] = cb
            },
            init() {
                window.onhashchange = () => {
                    var hash = location.hash.replace('#', '')
                    // 根据hash 获取 this.route 中对应的内容
                    this.routes[hash] && this.routes[hash]()
                }
            }
        }
        router.init()

        // 用户使用
        var view = document.getElementById('view')
        router.route('/', () => {
            view.innerHTML = '首页内容'
        })
        router.route('/user', () => {
            view.innerHTML = '用户内容'
        })
        router.route('/cart', () => {
            view.innerHTML = '购物车内容'
        })

    </script>
</body>
所以猜测,vue-router的hash模式应该也是这样的,通过监听hash的变化来匹配相应的component,至于源码中的巴拉巴拉小魔仙,日后再说吧