看源码是多么伟大又无聊的事情,可惜看不懂,不如听个课,记个笔记
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,至于源码中的巴拉巴拉小魔仙,日后再说吧