路由模式
1. hash
使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。
Hash URL,当 # 后面的哈希值发生变化时,不会向服务器请求数据,可以通过 hashchange 事件来监听到 URL 的变化,从而进行跳转页面。
2. history
依赖 HTML5 History API 和服务器配置
3. abstract
支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。
router调用
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Demo from '@/views/Demo.vue'
import InstantMessager from '@/views/InstantMessager'
import Seller from '@/views/Seller'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/demo',
name: 'Demo',
component: Demo,
meta: {
isFullPage: true
}
},
{
path: '/instantMessager',
name: 'InstantMessager',
component: InstantMessager,
},
{
path: '/seller',
name: 'Seller',
component: Seller,
meta: {
isFullPage: true
}
},
]
const router = new VueRouter({
mode: '',
base: process.env.BASE_URL,
routes
})
export default router
源码解析
1. Install
Vue.use(VueRouter)会执行install方法
1、在beforeCreated中初始化vue-router,并将_route响应式
2、在 Vue 原型上添加 r o u t e r 属 性 ( V u e R o u t e r ) 并 代 理 到 t h i s . router 属性( VueRouter )并代理到 this.router属性(VueRouter)并代理到this.root._router
3、Vue上注册router-link和router-view两个组件
export function install (Vue) {
if (install.installed && _Vue === Vue) return
install.installed = true
_Vue = Vue
const isDef = v => v !== undefined
const registerInstance = (vm, callVal) => {
let i = vm.$options._parentVnode
if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
i(vm, callVal)
}
}
Vue.mixin({
beforeCreate () {
if (isDef(this.$options.router)) {
this._routerRoot = this
this._router = this.$options.router
this._router.init(this)
Vue.util.defineReactive(this, '_route', this._router.history.current)
} else {
this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
}
registerInstance(this, this)
},
destroyed () {
registerInstance(this)
}
})
Object.defineProperty(Vue.prototype, '$router', {
get () { return this._routerRoot._router }
})
Object.defineProperty(Vue.prototype, '$route', {
get () { return this._routerRoot._route }
})
Vue.component('RouterView', View)
Vue.component('RouterLink', Link)
const strats = Vue.config.optionMergeStrategies
// use the same hook merging strategy for route hooks
strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}
2. router实例
生成实例过程中,主要做了以下两件事
1、根据配置数组(传入的routes)生成路由配置记录表。
2、根据不同模式生成监控路由变化的History对象
首先我们看到在new VueRouter()的时候传入的参数,比如mode,base,routes等。mode是导航模式,有hash(默认),history,abstract。
hash 是默认值,如果不传入或者浏览器不支持history时,就用hash。
class VueRouter {
constructor (options: RouterOptions = {}) {
this.app = null
this.apps = []
this.options = options
this.beforeHooks = []
this.resolveHooks = []
this.afterHooks = []
this.matcher = createMatcher(options.routes || [], this)
let mode = options.mode || 'hash'
this.fallback =
mode === 'history' && !supportsPushState && options.fallback !== false
if (this.fallback) {
mode = 'hash'
}
if (!inBrowser) {
mode = 'abstract'
}
this.mode = mode
switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}
}
1). createMatcher
根据routes数组,做一个映射,返回match、addRoutes 、addRoute、getRoutes 方法。
this.matcher = createMatcher(options.routes || [], this)
// 方法createMatcher:
export function createMatcher (
routes: Array<RouteConfig>,
router: VueRouter
): Matcher {
const { pathList, pathMap, nameMap } = createRouteMap(routes)
function addRoutes (routes) { }
function addRoute (parentOrRoute, route) {}
function getRoutes () { }
function match { }
return {
match,
addRoute,
getRoutes,
addRoutes
}
}
2)createRouteMap, 创建路由映射表, 路径/名称的映射表,生成路由记录(route records);
const { pathList, pathMap, nameMap } = createRouteMap(routes)
路由记录属性如下:
const record: RouteRecord = {
path: normalizedPath,
regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),
components: route.components || { default: route.component },
alias: route.alias
? typeof route.alias === 'string'
? [route.alias]
: route.alias
: [],
instances: {},
enteredCbs: {},
name,
parent,
matchAs,
redirect: route.redirect,
beforeEnter: route.beforeEnter,
meta: route.meta || {},
props:
route.props == null
? {}
: route.components
? route.props
: { default: route.props }
}
如某一条路由记录
createRouteMap为每条路由生成路由记录,结果如下:
2)判断mode的值,根据不同的mode走不同的方法,
若浏览器不支持HTML5History方式(通过supportsPushState变量判断),则mode强制设为’hash’;若不是在浏览器环境下运行,则mode强制设为’abstract’
点击跳转主线:
this.$router.push(’/demo’) ->History.push -> transitionTo -> match -> createRoute -> confirmTransition -> updateRoute-> render
createRoute