另外，当第一次访问页面，路由进行初始化的时候，如果是 hash 模式，则会对 url 进行检查，如果发现访问的 url 没有带 # 字符，则会自动追加，例如初次访问 :8080 这个 url ， vue-router 会自动置换为 ，方便之后的路由管理：
// src/history/hash.js function ensureSlash (): boolean { const path = getHash() if (path.charAt(0) === 'https://www.jb51.net/') { return true } replaceHash('https://www.jb51.net/' + path) return false }
scrollBehavior
当从一个路由 /a 跳转到另外的路由 /b 后，如果在路由 /a 的页面中进行了滚动条的滚动行为，那么页面跳转到 /b 时，会发现浏览器的滚动条位置和 /a 的一样（如果 /b 也能滚动的话），或者刷新当前页面，浏览器的滚动条位置依旧不变，不会直接返回到顶部的 而如果是通过点击浏览器的前进、后退按钮来控制路由切换时，则部门浏览器(例如微信)滚动条在路由切换时都会自动返回到顶部，即 scrollTop=0 的位置 这些都是浏览器默认的行为，如果想要定制页面切换时的滚动条位置，则可以借助 scrollBehavior 这个 vue-router 的 options
当路由初始化时， vue-router 会对路由的切换事件进行监听，监听逻辑的一部分就是用于控制浏览器滚动条的位置：
// src/history/hash.js setupListeners () { ... if (supportsScroll) { // 进行浏览器滚动条的事件控制 setupScroll() } ... }
这个 set 方法定义在 src/util/scroll.js ，这个文件就是专门用于控制滚动条位置的，通过监听路由切换事件从而进行滚动条位置控制：
// src/util/scroll.js window.addEventListener('popstate', e => { saveScrollPosition() if (e.state && e.state.key) { setStateKey(e.state.key) } })
通过 scrollBehavior 可以定制路由切换的滚动条位置， vue-router 的github上的源码中，有相关的 example ，源码位置在 vue-router/examples/scroll-behavior/app.js
router-view & router-linkrouter-view 和 router-link 这两个 vue-router 的内置组件，源码位于 src/components 下
router-view
router-view 是无状态(没有响应式数据)、无实例(没有 this 上下文)的函数式组件，其通过路由匹配获取到对应的组件实例，通过 h 函数动态生成组件，如果当前路由没有匹配到任何组件，则渲染一个注释节点
// vue-router/src/components/view.js ... const matched = route.matched[depth] // render empty node if no matched route if (!matched) { cache[name] = null return h() } const component = cache[name] = matched.components[name] ... return h(component, data, children)
每次路由切换都会触发 router-view 重新 render 从而渲染出新的视图，这个触发的动作是在 vue-router 初始化 init 的时候就声明了的：
// src/install.js Vue.mixin({ beforeCreate () { if (isDef(this.$options.router)) { this._routerRoot = this this._router = this.$options.router this._router.init(this) // 触发 router-view重渲染 Vue.util.defineReactive(this, '_route', this._router.history.current) ... })
将 this._route 通过 defineReactive 变成一个响应式的数据，这个 defineReactive 就是 vue 中定义的，用于将数据变成响应式的一个方法，源码在 vue/src/core/observer/index.js 中，其核心就是通过 Object.defineProperty 方法修改数据的 getter 和 setter ：
Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { // 进行依赖收集 dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value }, set: function reactiveSetter (newVal) { ... // 通知订阅当前数据 watcher的观察者进行响应 dep.notify() }
当路由发生变化时，将会调用 router-view 的 render 函数，此函数中访问了 this._route 这个数据，也就相当于是调用了 this._route 的 getter 方法，触发依赖收集，建立一个 Watcher ，执行 _update 方法，从而让页面重新渲染
// vue-router/src/components/view.js render (_, { props, children, parent, data }) { // used by devtools to display a router-view badge data.routerView = true // directly use parent context's createElement() function // so that components rendered by router-view can resolve named slots const h = parent.$createElement const name = props.name // 触发依赖收集，建立 render watcher const route = parent.$route ... }
这个 render watcher 的派发更新，也就是 setter 的调用，位于 src/index.js ：
history.listen(route => { this.apps.forEach((app) => { // 触发 setter app._route = route }) })
router-linkrouter-link 在执行 render 函数的时候，会根据当前的路由状态，给渲染出来的 active 元素添加 class ，所以你可以借助此给 active 路由元素设置样式等：