├── .editorconfig ├── README.md ├── async ├── index.html └── index.js ├── context ├── index.html └── index.js ├── custom-iterator ├── index.html └── index.js ├── index.html ├── lib ├── vue-router.js └── vue.js ├── package.json └── template-slot ├── helper.js ├── index.html └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | indent_size=2 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-advanced-programming 2 | 3 | A collection of tricks in [Vue.js](https://github.com/vuejs/vue). 4 | 5 | Online demo: https://herringtondarkholme.github.io/vue-advanced-programming/ 6 | -------------------------------------------------------------------------------- /async/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | async 7 | 8 | 9 |
foo
10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /async/index.js: -------------------------------------------------------------------------------- 1 | function Foo(resolve) { 2 | setTimeout(() => { 3 | resolve({ 4 | template: '
foo
' 5 | }) 6 | }) 7 | } 8 | 9 | const router = new VueRouter({ 10 | routes: [ 11 | { path: '/', component: Foo } 12 | ] 13 | }) 14 | 15 | new Vue({ 16 | template: '
', 17 | router 18 | }).$mount('#app') 19 | -------------------------------------------------------------------------------- /context/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | context 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /context/index.js: -------------------------------------------------------------------------------- 1 | function contextToken(name) { 2 | return typeof Symbol === 'function' ? Symbol(name) : name + Math.random() 3 | } 4 | 5 | Vue.mixin({ 6 | beforeCreate() { 7 | if (!this.$options.expose) return 8 | const computed = this.$options.computed || {} 9 | computed.$context = () => this.$options.expose.call(this, this) 10 | this.$options.computed = computed 11 | } 12 | }) 13 | 14 | Vue.mixin({ 15 | beforeCreate() { 16 | if (!this.$options.inject) return 17 | const computed = this.$options.computed || {} 18 | for (let key of Object.keys(this.$options.inject)) { 19 | const token = this.$options.inject[key] 20 | computed[key] = () => this.$inject({token}) 21 | } 22 | this.$options.computed = computed 23 | }, 24 | methods: { 25 | $inject({token, all}) { 26 | let parent = this 27 | let ret = [] 28 | while (parent) { 29 | const $context = parent.$context 30 | if ($context && $context.hasOwnProperty(token)) { 31 | if (all) ret.push($context[token]) 32 | else return $context[token] 33 | } 34 | parent = parent.$parent 35 | } 36 | return all ? ret : undefined 37 | } 38 | } 39 | }) 40 | 41 | 42 | // example 43 | 44 | var user = contextToken('user') 45 | var anotherUser = contextToken('user') 46 | var allUser = contextToken('allUser') 47 | 48 | Vue.component('parent', { 49 | template: ` 50 |
51 |
52 | Child in template: 53 | Man in the middle: 54 | 55 |
`, 56 | 57 | data() { 58 | return { 59 | user: { 60 | name: 'Sebastian ', 61 | }, 62 | } 63 | }, 64 | expose: (vm) => ({ 65 | [user]: vm.user, 66 | [allUser]: vm.user.name 67 | }) 68 | }) 69 | 70 | Vue.component('mitm', { 71 | template: ``, 72 | data() { 73 | return { 74 | user: { 75 | name: 'Deyne', 76 | } 77 | } 78 | }, 79 | expose() { 80 | let name = this.user.name 81 | return { 82 | [anotherUser]: this.user, 83 | [allUser]: name 84 | } 85 | } 86 | }) 87 | 88 | Vue.component('child', { 89 | template: '
{{ user.name }} in {{$inject({token: allUser, all: true})}}
', 90 | data: () => ({allUser}), 91 | inject: { user } 92 | }) 93 | 94 | new Vue({ 95 | el: '#app', 96 | template: 'Another child in slot: ' 97 | }) 98 | -------------------------------------------------------------------------------- /custom-iterator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | custom iterator 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /custom-iterator/index.js: -------------------------------------------------------------------------------- 1 | class Counter { 2 | constructor() { 3 | this.i = 1 4 | } 5 | *[Symbol.iterator]() { 6 | for (let i = 0; i < this.i; i++) yield i 7 | } 8 | increment() { 9 | this.i++ 10 | } 11 | } 12 | 13 | new Vue({ 14 | el: '#app', 15 | template: ` 16 |
17 | 18 |

{{v}}

19 |
`, 20 | data: { 21 | list: new Counter 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Advanced Programming 7 | 8 | 9 |

Vue Advanced Programming

10 |

A collection of tricks in vue.js

11 | Template Slot 12 | Custom iterator 13 | Context 14 | Async 15 | 16 | 17 | -------------------------------------------------------------------------------- /lib/vue-router.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-router v2.1.1 3 | * (c) 2016 Evan You 4 | * @license MIT 5 | */ 6 | (function (global, factory) { 7 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 8 | typeof define === 'function' && define.amd ? define(factory) : 9 | (global.VueRouter = factory()); 10 | }(this, (function () { 'use strict'; 11 | 12 | 13 | var resolveRouterView 14 | function initialLoad() { 15 | resolveRouterView(View) 16 | } 17 | 18 | var View = { 19 | name: 'router-view', 20 | functional: true, 21 | props: { 22 | name: { 23 | type: String, 24 | default: 'default' 25 | } 26 | }, 27 | render: function render (h, ref) { 28 | var props = ref.props; 29 | var children = ref.children; 30 | var parent = ref.parent; 31 | var data = ref.data; 32 | 33 | data.routerView = true 34 | 35 | var route = parent.$route 36 | var cache = parent._routerViewCache || (parent._routerViewCache = {}) 37 | var depth = 0 38 | var inactive = false 39 | 40 | while (parent) { 41 | if (parent.$vnode && parent.$vnode.data.routerView) { 42 | depth++ 43 | } 44 | if (parent._inactive) { 45 | inactive = true 46 | } 47 | parent = parent.$parent 48 | } 49 | 50 | data.routerViewDepth = depth 51 | var matched = route.matched[depth] 52 | if (!matched) { 53 | return h() 54 | } 55 | 56 | var name = props.name 57 | var component = inactive 58 | ? cache[name] 59 | : (cache[name] = matched.components[name]) 60 | 61 | if (!inactive) { 62 | var hooks = data.hook || (data.hook = {}) 63 | hooks.init = function (vnode) { 64 | matched.instances[name] = vnode.child 65 | } 66 | hooks.prepatch = function (oldVnode, vnode) { 67 | matched.instances[name] = vnode.child 68 | } 69 | hooks.destroy = function (vnode) { 70 | if (matched.instances[name] === vnode.child) { 71 | matched.instances[name] = undefined 72 | } 73 | } 74 | } 75 | 76 | return h(component, data, children) 77 | } 78 | } 79 | 80 | /* */ 81 | 82 | function assert (condition, message) { 83 | if (!condition) { 84 | throw new Error(("[vue-router] " + message)) 85 | } 86 | } 87 | 88 | function warn (condition, message) { 89 | if (!condition) { 90 | typeof console !== 'undefined' && console.warn(("[vue-router] " + message)) 91 | } 92 | } 93 | 94 | /* */ 95 | 96 | var encode = encodeURIComponent 97 | var decode = decodeURIComponent 98 | 99 | function resolveQuery ( 100 | query, 101 | extraQuery 102 | ) { 103 | if ( extraQuery === void 0 ) extraQuery = {}; 104 | 105 | if (query) { 106 | var parsedQuery 107 | try { 108 | parsedQuery = parseQuery(query) 109 | } catch (e) { 110 | "development" !== 'production' && warn(false, e.message) 111 | parsedQuery = {} 112 | } 113 | for (var key in extraQuery) { 114 | parsedQuery[key] = extraQuery[key] 115 | } 116 | return parsedQuery 117 | } else { 118 | return extraQuery 119 | } 120 | } 121 | 122 | function parseQuery (query) { 123 | var res = {} 124 | 125 | query = query.trim().replace(/^(\?|#|&)/, '') 126 | 127 | if (!query) { 128 | return res 129 | } 130 | 131 | query.split('&').forEach(function (param) { 132 | var parts = param.replace(/\+/g, ' ').split('=') 133 | var key = decode(parts.shift()) 134 | var val = parts.length > 0 135 | ? decode(parts.join('=')) 136 | : null 137 | 138 | if (res[key] === undefined) { 139 | res[key] = val 140 | } else if (Array.isArray(res[key])) { 141 | res[key].push(val) 142 | } else { 143 | res[key] = [res[key], val] 144 | } 145 | }) 146 | 147 | return res 148 | } 149 | 150 | function stringifyQuery (obj) { 151 | var res = obj ? Object.keys(obj).map(function (key) { 152 | var val = obj[key] 153 | 154 | if (val === undefined) { 155 | return '' 156 | } 157 | 158 | if (val === null) { 159 | return encode(key) 160 | } 161 | 162 | if (Array.isArray(val)) { 163 | var result = [] 164 | val.slice().forEach(function (val2) { 165 | if (val2 === undefined) { 166 | return 167 | } 168 | if (val2 === null) { 169 | result.push(encode(key)) 170 | } else { 171 | result.push(encode(key) + '=' + encode(val2)) 172 | } 173 | }) 174 | return result.join('&') 175 | } 176 | 177 | return encode(key) + '=' + encode(val) 178 | }).filter(function (x) { return x.length > 0; }).join('&') : null 179 | return res ? ("?" + res) : '' 180 | } 181 | 182 | /* */ 183 | 184 | function createRoute ( 185 | record, 186 | location, 187 | redirectedFrom 188 | ) { 189 | var route = { 190 | name: location.name || (record && record.name), 191 | meta: (record && record.meta) || {}, 192 | path: location.path || '/', 193 | hash: location.hash || '', 194 | query: location.query || {}, 195 | params: location.params || {}, 196 | fullPath: getFullPath(location), 197 | matched: record ? formatMatch(record) : [] 198 | } 199 | if (redirectedFrom) { 200 | route.redirectedFrom = getFullPath(redirectedFrom) 201 | } 202 | return Object.freeze(route) 203 | } 204 | 205 | // the starting route that represents the initial state 206 | var START = createRoute(null, { 207 | path: '/' 208 | }) 209 | 210 | function formatMatch (record) { 211 | var res = [] 212 | while (record) { 213 | res.unshift(record) 214 | record = record.parent 215 | } 216 | return res 217 | } 218 | 219 | function getFullPath (ref) { 220 | var path = ref.path; 221 | var query = ref.query; if ( query === void 0 ) query = {}; 222 | var hash = ref.hash; if ( hash === void 0 ) hash = ''; 223 | 224 | return (path || '/') + stringifyQuery(query) + hash 225 | } 226 | 227 | var trailingSlashRE = /\/$/ 228 | function isSameRoute (a, b) { 229 | if (b === START) { 230 | return a === b 231 | } else if (!b) { 232 | return false 233 | } else if (a.path && b.path) { 234 | return ( 235 | a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') && 236 | a.hash === b.hash && 237 | isObjectEqual(a.query, b.query) 238 | ) 239 | } else if (a.name && b.name) { 240 | return ( 241 | a.name === b.name && 242 | a.hash === b.hash && 243 | isObjectEqual(a.query, b.query) && 244 | isObjectEqual(a.params, b.params) 245 | ) 246 | } else { 247 | return false 248 | } 249 | } 250 | 251 | function isObjectEqual (a, b) { 252 | if ( a === void 0 ) a = {}; 253 | if ( b === void 0 ) b = {}; 254 | 255 | var aKeys = Object.keys(a) 256 | var bKeys = Object.keys(b) 257 | if (aKeys.length !== bKeys.length) { 258 | return false 259 | } 260 | return aKeys.every(function (key) { return String(a[key]) === String(b[key]); }) 261 | } 262 | 263 | function isIncludedRoute (current, target) { 264 | return ( 265 | current.path.indexOf(target.path.replace(/\/$/, '')) === 0 && 266 | (!target.hash || current.hash === target.hash) && 267 | queryIncludes(current.query, target.query) 268 | ) 269 | } 270 | 271 | function queryIncludes (current, target) { 272 | for (var key in target) { 273 | if (!(key in current)) { 274 | return false 275 | } 276 | } 277 | return true 278 | } 279 | 280 | /* */ 281 | 282 | // work around weird flow bug 283 | var toTypes = [String, Object] 284 | 285 | var Link = { 286 | name: 'router-link', 287 | props: { 288 | to: { 289 | type: toTypes, 290 | required: true 291 | }, 292 | tag: { 293 | type: String, 294 | default: 'a' 295 | }, 296 | exact: Boolean, 297 | append: Boolean, 298 | replace: Boolean, 299 | activeClass: String, 300 | event: { 301 | type: [String, Array], 302 | default: 'click' 303 | } 304 | }, 305 | render: function render (h) { 306 | var this$1 = this; 307 | 308 | var router = this.$router 309 | var current = this.$route 310 | var ref = router.resolve(this.to, current, this.append); 311 | var normalizedTo = ref.normalizedTo; 312 | var resolved = ref.resolved; 313 | var href = ref.href; 314 | var classes = {} 315 | var activeClass = this.activeClass || router.options.linkActiveClass || 'router-link-active' 316 | var compareTarget = normalizedTo.path ? createRoute(null, normalizedTo) : resolved 317 | classes[activeClass] = this.exact 318 | ? isSameRoute(current, compareTarget) 319 | : isIncludedRoute(current, compareTarget) 320 | 321 | var handler = function (e) { 322 | if (guardEvent(e)) { 323 | if (this$1.replace) { 324 | router.replace(normalizedTo) 325 | } else { 326 | router.push(normalizedTo) 327 | } 328 | } 329 | } 330 | 331 | var on = { click: guardEvent } 332 | if (Array.isArray(this.event)) { 333 | this.event.forEach(function (e) { on[e] = handler }) 334 | } else { 335 | on[this.event] = handler 336 | } 337 | 338 | var data = { 339 | class: classes 340 | } 341 | 342 | if (this.tag === 'a') { 343 | data.on = on 344 | data.attrs = { href: href } 345 | } else { 346 | // find the first child and apply listener and href 347 | var a = findAnchor(this.$slots.default) 348 | if (a) { 349 | // in case the is a static node 350 | a.isStatic = false 351 | var extend = _Vue.util.extend 352 | var aData = a.data = extend({}, a.data) 353 | aData.on = on 354 | var aAttrs = a.data.attrs = extend({}, a.data.attrs) 355 | aAttrs.href = href 356 | } else { 357 | // doesn't have child, apply listener to self 358 | data.on = on 359 | } 360 | } 361 | 362 | return h(this.tag, data, this.$slots.default) 363 | } 364 | } 365 | 366 | function guardEvent (e) { 367 | // don't redirect with control keys 368 | /* istanbul ignore if */ 369 | if (e.metaKey || e.ctrlKey || e.shiftKey) { return } 370 | // don't redirect when preventDefault called 371 | /* istanbul ignore if */ 372 | if (e.defaultPrevented) { return } 373 | // don't redirect on right click 374 | /* istanbul ignore if */ 375 | if (e.button !== 0) { return } 376 | // don't redirect if `target="_blank"` 377 | /* istanbul ignore if */ 378 | var target = e.target.getAttribute('target') 379 | if (/\b_blank\b/i.test(target)) { return } 380 | 381 | e.preventDefault() 382 | return true 383 | } 384 | 385 | function findAnchor (children) { 386 | if (children) { 387 | var child 388 | for (var i = 0; i < children.length; i++) { 389 | child = children[i] 390 | if (child.tag === 'a') { 391 | return child 392 | } 393 | if (child.children && (child = findAnchor(child.children))) { 394 | return child 395 | } 396 | } 397 | } 398 | } 399 | 400 | var _Vue 401 | 402 | function install (Vue) { 403 | if (install.installed) { return } 404 | install.installed = true 405 | 406 | _Vue = Vue 407 | 408 | Object.defineProperty(Vue.prototype, '$router', { 409 | get: function get () { return this.$root._router } 410 | }) 411 | 412 | Object.defineProperty(Vue.prototype, '$route', { 413 | get: function get$1 () { return this.$root._route } 414 | }) 415 | 416 | Vue.mixin({ 417 | beforeCreate: function beforeCreate () { 418 | if (this.$options.router) { 419 | this._router = this.$options.router 420 | this._router.init(this) 421 | Vue.util.defineReactive(this, '_route', this._router.history.current) 422 | } 423 | } 424 | }) 425 | 426 | Vue.component('router-view', resolve => resolveRouterView = resolve) 427 | Vue.component('router-link', Link) 428 | 429 | var strats = Vue.config.optionMergeStrategies 430 | // use the same hook merging strategy for route hooks 431 | strats.beforeRouteEnter = strats.beforeRouteLeave = strats.created 432 | } 433 | 434 | /* */ 435 | 436 | function resolvePath ( 437 | relative, 438 | base, 439 | append 440 | ) { 441 | if (relative.charAt(0) === '/') { 442 | return relative 443 | } 444 | 445 | if (relative.charAt(0) === '?' || relative.charAt(0) === '#') { 446 | return base + relative 447 | } 448 | 449 | var stack = base.split('/') 450 | 451 | // remove trailing segment if: 452 | // - not appending 453 | // - appending to trailing slash (last segment is empty) 454 | if (!append || !stack[stack.length - 1]) { 455 | stack.pop() 456 | } 457 | 458 | // resolve relative path 459 | var segments = relative.replace(/^\//, '').split('/') 460 | for (var i = 0; i < segments.length; i++) { 461 | var segment = segments[i] 462 | if (segment === '.') { 463 | continue 464 | } else if (segment === '..') { 465 | stack.pop() 466 | } else { 467 | stack.push(segment) 468 | } 469 | } 470 | 471 | // ensure leading slash 472 | if (stack[0] !== '') { 473 | stack.unshift('') 474 | } 475 | 476 | return stack.join('/') 477 | } 478 | 479 | function parsePath (path) { 480 | var hash = '' 481 | var query = '' 482 | 483 | var hashIndex = path.indexOf('#') 484 | if (hashIndex >= 0) { 485 | hash = path.slice(hashIndex) 486 | path = path.slice(0, hashIndex) 487 | } 488 | 489 | var queryIndex = path.indexOf('?') 490 | if (queryIndex >= 0) { 491 | query = path.slice(queryIndex + 1) 492 | path = path.slice(0, queryIndex) 493 | } 494 | 495 | return { 496 | path: path, 497 | query: query, 498 | hash: hash 499 | } 500 | } 501 | 502 | function cleanPath (path) { 503 | return path.replace(/\/\//g, '/') 504 | } 505 | 506 | /* */ 507 | 508 | function createRouteMap (routes) { 509 | var pathMap = Object.create(null) 510 | var nameMap = Object.create(null) 511 | 512 | routes.forEach(function (route) { 513 | addRouteRecord(pathMap, nameMap, route) 514 | }) 515 | 516 | return { 517 | pathMap: pathMap, 518 | nameMap: nameMap 519 | } 520 | } 521 | 522 | function addRouteRecord ( 523 | pathMap, 524 | nameMap, 525 | route, 526 | parent, 527 | matchAs 528 | ) { 529 | var path = route.path; 530 | var name = route.name; 531 | if ("development" !== 'production') { 532 | assert(path != null, "\"path\" is required in a route configuration.") 533 | assert( 534 | typeof route.component !== 'string', 535 | "route config \"component\" for path: " + (String(path || name)) + " cannot be a " + 536 | "string id. Use an actual component instead." 537 | ) 538 | } 539 | 540 | var record = { 541 | path: normalizePath(path, parent), 542 | components: route.components || { default: route.component }, 543 | instances: {}, 544 | name: name, 545 | parent: parent, 546 | matchAs: matchAs, 547 | redirect: route.redirect, 548 | beforeEnter: route.beforeEnter, 549 | meta: route.meta || {} 550 | } 551 | 552 | if (route.children) { 553 | // Warn if route is named and has a default child route. 554 | // If users navigate to this route by name, the default child will 555 | // not be rendered (GH Issue #629) 556 | if ("development" !== 'production') { 557 | if (route.name && route.children.some(function (child) { return /^\/?$/.test(child.path); })) { 558 | warn(false, ("Named Route '" + (route.name) + "' has a default child route.\n When navigating to this named route (:to=\"{name: '" + (route.name) + "'\"), the default child route will not be rendered.\n Remove the name from this route and use the name of the default child route for named links instead.") 559 | ) 560 | } 561 | } 562 | route.children.forEach(function (child) { 563 | addRouteRecord(pathMap, nameMap, child, record) 564 | }) 565 | } 566 | 567 | if (route.alias !== undefined) { 568 | if (Array.isArray(route.alias)) { 569 | route.alias.forEach(function (alias) { 570 | addRouteRecord(pathMap, nameMap, { path: alias }, parent, record.path) 571 | }) 572 | } else { 573 | addRouteRecord(pathMap, nameMap, { path: route.alias }, parent, record.path) 574 | } 575 | } 576 | 577 | if (!pathMap[record.path]) { 578 | pathMap[record.path] = record 579 | } 580 | if (name) { 581 | if (!nameMap[name]) { 582 | nameMap[name] = record 583 | } else if ("development" !== 'production') { 584 | warn(false, ("Duplicate named routes definition: { name: \"" + name + "\", path: \"" + (record.path) + "\" }")) 585 | } 586 | } 587 | } 588 | 589 | function normalizePath (path, parent) { 590 | path = path.replace(/\/$/, '') 591 | if (path[0] === '/') { return path } 592 | if (parent == null) { return path } 593 | return cleanPath(((parent.path) + "/" + path)) 594 | } 595 | 596 | var __moduleExports = Array.isArray || function (arr) { 597 | return Object.prototype.toString.call(arr) == '[object Array]'; 598 | }; 599 | 600 | var isarray = __moduleExports 601 | 602 | /** 603 | * Expose `pathToRegexp`. 604 | */ 605 | var index = pathToRegexp 606 | var parse_1 = parse 607 | var compile_1 = compile 608 | var tokensToFunction_1 = tokensToFunction 609 | var tokensToRegExp_1 = tokensToRegExp 610 | 611 | /** 612 | * The main path matching regexp utility. 613 | * 614 | * @type {RegExp} 615 | */ 616 | var PATH_REGEXP = new RegExp([ 617 | // Match escaped characters that would otherwise appear in future matches. 618 | // This allows the user to escape special characters that won't transform. 619 | '(\\\\.)', 620 | // Match Express-style parameters and un-named parameters with a prefix 621 | // and optional suffixes. Matches appear as: 622 | // 623 | // "/:test(\\d+)?" => ["/", "test", "\d+", undefined, "?", undefined] 624 | // "/route(\\d+)" => [undefined, undefined, undefined, "\d+", undefined, undefined] 625 | // "/*" => ["/", undefined, undefined, undefined, undefined, "*"] 626 | '([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))' 627 | ].join('|'), 'g') 628 | 629 | /** 630 | * Parse a string for the raw tokens. 631 | * 632 | * @param {string} str 633 | * @param {Object=} options 634 | * @return {!Array} 635 | */ 636 | function parse (str, options) { 637 | var tokens = [] 638 | var key = 0 639 | var index = 0 640 | var path = '' 641 | var defaultDelimiter = options && options.delimiter || '/' 642 | var res 643 | 644 | while ((res = PATH_REGEXP.exec(str)) != null) { 645 | var m = res[0] 646 | var escaped = res[1] 647 | var offset = res.index 648 | path += str.slice(index, offset) 649 | index = offset + m.length 650 | 651 | // Ignore already escaped sequences. 652 | if (escaped) { 653 | path += escaped[1] 654 | continue 655 | } 656 | 657 | var next = str[index] 658 | var prefix = res[2] 659 | var name = res[3] 660 | var capture = res[4] 661 | var group = res[5] 662 | var modifier = res[6] 663 | var asterisk = res[7] 664 | 665 | // Push the current path onto the tokens. 666 | if (path) { 667 | tokens.push(path) 668 | path = '' 669 | } 670 | 671 | var partial = prefix != null && next != null && next !== prefix 672 | var repeat = modifier === '+' || modifier === '*' 673 | var optional = modifier === '?' || modifier === '*' 674 | var delimiter = res[2] || defaultDelimiter 675 | var pattern = capture || group 676 | 677 | tokens.push({ 678 | name: name || key++, 679 | prefix: prefix || '', 680 | delimiter: delimiter, 681 | optional: optional, 682 | repeat: repeat, 683 | partial: partial, 684 | asterisk: !!asterisk, 685 | pattern: pattern ? escapeGroup(pattern) : (asterisk ? '.*' : '[^' + escapeString(delimiter) + ']+?') 686 | }) 687 | } 688 | 689 | // Match any characters still remaining. 690 | if (index < str.length) { 691 | path += str.substr(index) 692 | } 693 | 694 | // If the path exists, push it onto the end. 695 | if (path) { 696 | tokens.push(path) 697 | } 698 | 699 | return tokens 700 | } 701 | 702 | /** 703 | * Compile a string to a template function for the path. 704 | * 705 | * @param {string} str 706 | * @param {Object=} options 707 | * @return {!function(Object=, Object=)} 708 | */ 709 | function compile (str, options) { 710 | return tokensToFunction(parse(str, options)) 711 | } 712 | 713 | /** 714 | * Prettier encoding of URI path segments. 715 | * 716 | * @param {string} 717 | * @return {string} 718 | */ 719 | function encodeURIComponentPretty (str) { 720 | return encodeURI(str).replace(/[\/?#]/g, function (c) { 721 | return '%' + c.charCodeAt(0).toString(16).toUpperCase() 722 | }) 723 | } 724 | 725 | /** 726 | * Encode the asterisk parameter. Similar to `pretty`, but allows slashes. 727 | * 728 | * @param {string} 729 | * @return {string} 730 | */ 731 | function encodeAsterisk (str) { 732 | return encodeURI(str).replace(/[?#]/g, function (c) { 733 | return '%' + c.charCodeAt(0).toString(16).toUpperCase() 734 | }) 735 | } 736 | 737 | /** 738 | * Expose a method for transforming tokens into the path function. 739 | */ 740 | function tokensToFunction (tokens) { 741 | // Compile all the tokens into regexps. 742 | var matches = new Array(tokens.length) 743 | 744 | // Compile all the patterns before compilation. 745 | for (var i = 0; i < tokens.length; i++) { 746 | if (typeof tokens[i] === 'object') { 747 | matches[i] = new RegExp('^(?:' + tokens[i].pattern + ')$') 748 | } 749 | } 750 | 751 | return function (obj, opts) { 752 | var path = '' 753 | var data = obj || {} 754 | var options = opts || {} 755 | var encode = options.pretty ? encodeURIComponentPretty : encodeURIComponent 756 | 757 | for (var i = 0; i < tokens.length; i++) { 758 | var token = tokens[i] 759 | 760 | if (typeof token === 'string') { 761 | path += token 762 | 763 | continue 764 | } 765 | 766 | var value = data[token.name] 767 | var segment 768 | 769 | if (value == null) { 770 | if (token.optional) { 771 | // Prepend partial segment prefixes. 772 | if (token.partial) { 773 | path += token.prefix 774 | } 775 | 776 | continue 777 | } else { 778 | throw new TypeError('Expected "' + token.name + '" to be defined') 779 | } 780 | } 781 | 782 | if (isarray(value)) { 783 | if (!token.repeat) { 784 | throw new TypeError('Expected "' + token.name + '" to not repeat, but received `' + JSON.stringify(value) + '`') 785 | } 786 | 787 | if (value.length === 0) { 788 | if (token.optional) { 789 | continue 790 | } else { 791 | throw new TypeError('Expected "' + token.name + '" to not be empty') 792 | } 793 | } 794 | 795 | for (var j = 0; j < value.length; j++) { 796 | segment = encode(value[j]) 797 | 798 | if (!matches[i].test(segment)) { 799 | throw new TypeError('Expected all "' + token.name + '" to match "' + token.pattern + '", but received `' + JSON.stringify(segment) + '`') 800 | } 801 | 802 | path += (j === 0 ? token.prefix : token.delimiter) + segment 803 | } 804 | 805 | continue 806 | } 807 | 808 | segment = token.asterisk ? encodeAsterisk(value) : encode(value) 809 | 810 | if (!matches[i].test(segment)) { 811 | throw new TypeError('Expected "' + token.name + '" to match "' + token.pattern + '", but received "' + segment + '"') 812 | } 813 | 814 | path += token.prefix + segment 815 | } 816 | 817 | return path 818 | } 819 | } 820 | 821 | /** 822 | * Escape a regular expression string. 823 | * 824 | * @param {string} str 825 | * @return {string} 826 | */ 827 | function escapeString (str) { 828 | return str.replace(/([.+*?=^!:${}()[\]|\/\\])/g, '\\$1') 829 | } 830 | 831 | /** 832 | * Escape the capturing group by escaping special characters and meaning. 833 | * 834 | * @param {string} group 835 | * @return {string} 836 | */ 837 | function escapeGroup (group) { 838 | return group.replace(/([=!:$\/()])/g, '\\$1') 839 | } 840 | 841 | /** 842 | * Attach the keys as a property of the regexp. 843 | * 844 | * @param {!RegExp} re 845 | * @param {Array} keys 846 | * @return {!RegExp} 847 | */ 848 | function attachKeys (re, keys) { 849 | re.keys = keys 850 | return re 851 | } 852 | 853 | /** 854 | * Get the flags for a regexp from the options. 855 | * 856 | * @param {Object} options 857 | * @return {string} 858 | */ 859 | function flags (options) { 860 | return options.sensitive ? '' : 'i' 861 | } 862 | 863 | /** 864 | * Pull out keys from a regexp. 865 | * 866 | * @param {!RegExp} path 867 | * @param {!Array} keys 868 | * @return {!RegExp} 869 | */ 870 | function regexpToRegexp (path, keys) { 871 | // Use a negative lookahead to match only capturing groups. 872 | var groups = path.source.match(/\((?!\?)/g) 873 | 874 | if (groups) { 875 | for (var i = 0; i < groups.length; i++) { 876 | keys.push({ 877 | name: i, 878 | prefix: null, 879 | delimiter: null, 880 | optional: false, 881 | repeat: false, 882 | partial: false, 883 | asterisk: false, 884 | pattern: null 885 | }) 886 | } 887 | } 888 | 889 | return attachKeys(path, keys) 890 | } 891 | 892 | /** 893 | * Transform an array into a regexp. 894 | * 895 | * @param {!Array} path 896 | * @param {Array} keys 897 | * @param {!Object} options 898 | * @return {!RegExp} 899 | */ 900 | function arrayToRegexp (path, keys, options) { 901 | var parts = [] 902 | 903 | for (var i = 0; i < path.length; i++) { 904 | parts.push(pathToRegexp(path[i], keys, options).source) 905 | } 906 | 907 | var regexp = new RegExp('(?:' + parts.join('|') + ')', flags(options)) 908 | 909 | return attachKeys(regexp, keys) 910 | } 911 | 912 | /** 913 | * Create a path regexp from string input. 914 | * 915 | * @param {string} path 916 | * @param {!Array} keys 917 | * @param {!Object} options 918 | * @return {!RegExp} 919 | */ 920 | function stringToRegexp (path, keys, options) { 921 | return tokensToRegExp(parse(path, options), keys, options) 922 | } 923 | 924 | /** 925 | * Expose a function for taking tokens and returning a RegExp. 926 | * 927 | * @param {!Array} tokens 928 | * @param {(Array|Object)=} keys 929 | * @param {Object=} options 930 | * @return {!RegExp} 931 | */ 932 | function tokensToRegExp (tokens, keys, options) { 933 | if (!isarray(keys)) { 934 | options = /** @type {!Object} */ (keys || options) 935 | keys = [] 936 | } 937 | 938 | options = options || {} 939 | 940 | var strict = options.strict 941 | var end = options.end !== false 942 | var route = '' 943 | 944 | // Iterate over the tokens and create our regexp string. 945 | for (var i = 0; i < tokens.length; i++) { 946 | var token = tokens[i] 947 | 948 | if (typeof token === 'string') { 949 | route += escapeString(token) 950 | } else { 951 | var prefix = escapeString(token.prefix) 952 | var capture = '(?:' + token.pattern + ')' 953 | 954 | keys.push(token) 955 | 956 | if (token.repeat) { 957 | capture += '(?:' + prefix + capture + ')*' 958 | } 959 | 960 | if (token.optional) { 961 | if (!token.partial) { 962 | capture = '(?:' + prefix + '(' + capture + '))?' 963 | } else { 964 | capture = prefix + '(' + capture + ')?' 965 | } 966 | } else { 967 | capture = prefix + '(' + capture + ')' 968 | } 969 | 970 | route += capture 971 | } 972 | } 973 | 974 | var delimiter = escapeString(options.delimiter || '/') 975 | var endsWithDelimiter = route.slice(-delimiter.length) === delimiter 976 | 977 | // In non-strict mode we allow a slash at the end of match. If the path to 978 | // match already ends with a slash, we remove it for consistency. The slash 979 | // is valid at the end of a path match, not in the middle. This is important 980 | // in non-ending mode, where "/test/" shouldn't match "/test//route". 981 | if (!strict) { 982 | route = (endsWithDelimiter ? route.slice(0, -delimiter.length) : route) + '(?:' + delimiter + '(?=$))?' 983 | } 984 | 985 | if (end) { 986 | route += '$' 987 | } else { 988 | // In non-ending mode, we need the capturing groups to match as much as 989 | // possible by using a positive lookahead to the end or next path segment. 990 | route += strict && endsWithDelimiter ? '' : '(?=' + delimiter + '|$)' 991 | } 992 | 993 | return attachKeys(new RegExp('^' + route, flags(options)), keys) 994 | } 995 | 996 | /** 997 | * Normalize the given path string, returning a regular expression. 998 | * 999 | * An empty array can be passed in for the keys, which will hold the 1000 | * placeholder key descriptions. For example, using `/user/:id`, `keys` will 1001 | * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`. 1002 | * 1003 | * @param {(string|RegExp|Array)} path 1004 | * @param {(Array|Object)=} keys 1005 | * @param {Object=} options 1006 | * @return {!RegExp} 1007 | */ 1008 | function pathToRegexp (path, keys, options) { 1009 | if (!isarray(keys)) { 1010 | options = /** @type {!Object} */ (keys || options) 1011 | keys = [] 1012 | } 1013 | 1014 | options = options || {} 1015 | 1016 | if (path instanceof RegExp) { 1017 | return regexpToRegexp(path, /** @type {!Array} */ (keys)) 1018 | } 1019 | 1020 | if (isarray(path)) { 1021 | return arrayToRegexp(/** @type {!Array} */ (path), /** @type {!Array} */ (keys), options) 1022 | } 1023 | 1024 | return stringToRegexp(/** @type {string} */ (path), /** @type {!Array} */ (keys), options) 1025 | } 1026 | 1027 | index.parse = parse_1; 1028 | index.compile = compile_1; 1029 | index.tokensToFunction = tokensToFunction_1; 1030 | index.tokensToRegExp = tokensToRegExp_1; 1031 | 1032 | /* */ 1033 | 1034 | var regexpCache = Object.create(null) 1035 | 1036 | function getRouteRegex (path) { 1037 | var hit = regexpCache[path] 1038 | var keys, regexp 1039 | 1040 | if (hit) { 1041 | keys = hit.keys 1042 | regexp = hit.regexp 1043 | } else { 1044 | keys = [] 1045 | regexp = index(path, keys) 1046 | regexpCache[path] = { keys: keys, regexp: regexp } 1047 | } 1048 | 1049 | return { keys: keys, regexp: regexp } 1050 | } 1051 | 1052 | var regexpCompileCache = Object.create(null) 1053 | 1054 | function fillParams ( 1055 | path, 1056 | params, 1057 | routeMsg 1058 | ) { 1059 | try { 1060 | var filler = 1061 | regexpCompileCache[path] || 1062 | (regexpCompileCache[path] = index.compile(path)) 1063 | return filler(params || {}, { pretty: true }) 1064 | } catch (e) { 1065 | if ("development" !== 'production') { 1066 | warn(false, ("missing param for " + routeMsg + ": " + (e.message))) 1067 | } 1068 | return '' 1069 | } 1070 | } 1071 | 1072 | /* */ 1073 | 1074 | function normalizeLocation ( 1075 | raw, 1076 | current, 1077 | append 1078 | ) { 1079 | var next = typeof raw === 'string' ? { path: raw } : raw 1080 | // named target 1081 | if (next.name || next._normalized) { 1082 | return next 1083 | } 1084 | 1085 | // relative params 1086 | if (!next.path && next.params && current) { 1087 | next = assign({}, next) 1088 | next._normalized = true 1089 | var params = assign(assign({}, current.params), next.params) 1090 | if (current.name) { 1091 | next.name = current.name 1092 | next.params = params 1093 | } else if (current.matched) { 1094 | var rawPath = current.matched[current.matched.length - 1].path 1095 | next.path = fillParams(rawPath, params, ("path " + (current.path))) 1096 | } else if ("development" !== 'production') { 1097 | warn(false, "relative params navigation requires a current route.") 1098 | } 1099 | return next 1100 | } 1101 | 1102 | var parsedPath = parsePath(next.path || '') 1103 | var basePath = (current && current.path) || '/' 1104 | var path = parsedPath.path 1105 | ? resolvePath(parsedPath.path, basePath, append || next.append) 1106 | : (current && current.path) || '/' 1107 | var query = resolveQuery(parsedPath.query, next.query) 1108 | var hash = next.hash || parsedPath.hash 1109 | if (hash && hash.charAt(0) !== '#') { 1110 | hash = "#" + hash 1111 | } 1112 | 1113 | return { 1114 | _normalized: true, 1115 | path: path, 1116 | query: query, 1117 | hash: hash 1118 | } 1119 | } 1120 | 1121 | function assign (a, b) { 1122 | for (var key in b) { 1123 | a[key] = b[key] 1124 | } 1125 | return a 1126 | } 1127 | 1128 | /* */ 1129 | 1130 | function createMatcher (routes) { 1131 | var ref = createRouteMap(routes); 1132 | var pathMap = ref.pathMap; 1133 | var nameMap = ref.nameMap; 1134 | 1135 | function match ( 1136 | raw, 1137 | currentRoute, 1138 | redirectedFrom 1139 | ) { 1140 | var location = normalizeLocation(raw, currentRoute) 1141 | var name = location.name; 1142 | 1143 | if (name) { 1144 | var record = nameMap[name] 1145 | var paramNames = getRouteRegex(record.path).keys 1146 | .filter(function (key) { return !key.optional; }) 1147 | .map(function (key) { return key.name; }) 1148 | 1149 | if (typeof location.params !== 'object') { 1150 | location.params = {} 1151 | } 1152 | 1153 | if (currentRoute && typeof currentRoute.params === 'object') { 1154 | for (var key in currentRoute.params) { 1155 | if (!(key in location.params) && paramNames.indexOf(key) > -1) { 1156 | location.params[key] = currentRoute.params[key] 1157 | } 1158 | } 1159 | } 1160 | 1161 | if (record) { 1162 | location.path = fillParams(record.path, location.params, ("named route \"" + name + "\"")) 1163 | return _createRoute(record, location, redirectedFrom) 1164 | } 1165 | } else if (location.path) { 1166 | location.params = {} 1167 | for (var path in pathMap) { 1168 | if (matchRoute(path, location.params, location.path)) { 1169 | return _createRoute(pathMap[path], location, redirectedFrom) 1170 | } 1171 | } 1172 | } 1173 | // no match 1174 | return _createRoute(null, location) 1175 | } 1176 | 1177 | function redirect ( 1178 | record, 1179 | location 1180 | ) { 1181 | var originalRedirect = record.redirect 1182 | var redirect = typeof originalRedirect === 'function' 1183 | ? originalRedirect(createRoute(record, location)) 1184 | : originalRedirect 1185 | 1186 | if (typeof redirect === 'string') { 1187 | redirect = { path: redirect } 1188 | } 1189 | 1190 | if (!redirect || typeof redirect !== 'object') { 1191 | "development" !== 'production' && warn( 1192 | false, ("invalid redirect option: " + (JSON.stringify(redirect))) 1193 | ) 1194 | return _createRoute(null, location) 1195 | } 1196 | 1197 | var re = redirect 1198 | var name = re.name; 1199 | var path = re.path; 1200 | var query = location.query; 1201 | var hash = location.hash; 1202 | var params = location.params; 1203 | query = re.hasOwnProperty('query') ? re.query : query 1204 | hash = re.hasOwnProperty('hash') ? re.hash : hash 1205 | params = re.hasOwnProperty('params') ? re.params : params 1206 | 1207 | if (name) { 1208 | // resolved named direct 1209 | var targetRecord = nameMap[name] 1210 | if ("development" !== 'production') { 1211 | assert(targetRecord, ("redirect failed: named route \"" + name + "\" not found.")) 1212 | } 1213 | return match({ 1214 | _normalized: true, 1215 | name: name, 1216 | query: query, 1217 | hash: hash, 1218 | params: params 1219 | }, undefined, location) 1220 | } else if (path) { 1221 | // 1. resolve relative redirect 1222 | var rawPath = resolveRecordPath(path, record) 1223 | // 2. resolve params 1224 | var resolvedPath = fillParams(rawPath, params, ("redirect route with path \"" + rawPath + "\"")) 1225 | // 3. rematch with existing query and hash 1226 | return match({ 1227 | _normalized: true, 1228 | path: resolvedPath, 1229 | query: query, 1230 | hash: hash 1231 | }, undefined, location) 1232 | } else { 1233 | warn(false, ("invalid redirect option: " + (JSON.stringify(redirect)))) 1234 | return _createRoute(null, location) 1235 | } 1236 | } 1237 | 1238 | function alias ( 1239 | record, 1240 | location, 1241 | matchAs 1242 | ) { 1243 | var aliasedPath = fillParams(matchAs, location.params, ("aliased route with path \"" + matchAs + "\"")) 1244 | var aliasedMatch = match({ 1245 | _normalized: true, 1246 | path: aliasedPath 1247 | }) 1248 | if (aliasedMatch) { 1249 | var matched = aliasedMatch.matched 1250 | var aliasedRecord = matched[matched.length - 1] 1251 | location.params = aliasedMatch.params 1252 | return _createRoute(aliasedRecord, location) 1253 | } 1254 | return _createRoute(null, location) 1255 | } 1256 | 1257 | function _createRoute ( 1258 | record, 1259 | location, 1260 | redirectedFrom 1261 | ) { 1262 | if (record && record.redirect) { 1263 | return redirect(record, redirectedFrom || location) 1264 | } 1265 | if (record && record.matchAs) { 1266 | return alias(record, location, record.matchAs) 1267 | } 1268 | return createRoute(record, location, redirectedFrom) 1269 | } 1270 | 1271 | return match 1272 | } 1273 | 1274 | function matchRoute ( 1275 | path, 1276 | params, 1277 | pathname 1278 | ) { 1279 | var ref = getRouteRegex(path); 1280 | var regexp = ref.regexp; 1281 | var keys = ref.keys; 1282 | var m = pathname.match(regexp) 1283 | 1284 | if (!m) { 1285 | return false 1286 | } else if (!params) { 1287 | return true 1288 | } 1289 | 1290 | for (var i = 1, len = m.length; i < len; ++i) { 1291 | var key = keys[i - 1] 1292 | var val = typeof m[i] === 'string' ? decodeURIComponent(m[i]) : m[i] 1293 | if (key) { params[key.name] = val } 1294 | } 1295 | 1296 | return true 1297 | } 1298 | 1299 | function resolveRecordPath (path, record) { 1300 | return resolvePath(path, record.parent ? record.parent.path : '/', true) 1301 | } 1302 | 1303 | /* */ 1304 | 1305 | var inBrowser = typeof window !== 'undefined' 1306 | 1307 | var supportsHistory = inBrowser && (function () { 1308 | var ua = window.navigator.userAgent 1309 | 1310 | if ( 1311 | (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) && 1312 | ua.indexOf('Mobile Safari') !== -1 && 1313 | ua.indexOf('Chrome') === -1 && 1314 | ua.indexOf('Windows Phone') === -1 1315 | ) { 1316 | return false 1317 | } 1318 | 1319 | return window.history && 'pushState' in window.history 1320 | })() 1321 | 1322 | /* */ 1323 | 1324 | function runQueue (queue, fn, cb) { 1325 | var step = function (index) { 1326 | if (index >= queue.length) { 1327 | cb() 1328 | } else { 1329 | if (queue[index]) { 1330 | fn(queue[index], function () { 1331 | step(index + 1) 1332 | }) 1333 | } else { 1334 | step(index + 1) 1335 | } 1336 | } 1337 | } 1338 | step(0) 1339 | } 1340 | 1341 | /* */ 1342 | 1343 | 1344 | var History = function History (router, base) { 1345 | this.router = router 1346 | this.base = normalizeBase(base) 1347 | // start with a route object that stands for "nowhere" 1348 | this.current = START 1349 | this.pending = null 1350 | }; 1351 | 1352 | History.prototype.listen = function listen (cb) { 1353 | this.cb = cb 1354 | }; 1355 | 1356 | History.prototype.transitionTo = function transitionTo (location, onComplete, onAbort) { 1357 | var this$1 = this; 1358 | 1359 | var route = this.router.match(location, this.current) 1360 | this.confirmTransition(route, function () { 1361 | this$1.updateRoute(route) 1362 | onComplete && onComplete(route) 1363 | this$1.ensureURL() 1364 | }, onAbort) 1365 | }; 1366 | 1367 | History.prototype.confirmTransition = function confirmTransition (route, onComplete, onAbort) { 1368 | var this$1 = this; 1369 | 1370 | var current = this.current 1371 | var abort = function () { onAbort && onAbort() } 1372 | if (isSameRoute(route, current)) { 1373 | this.ensureURL() 1374 | return abort() 1375 | } 1376 | 1377 | var ref = resolveQueue(this.current.matched, route.matched); 1378 | var deactivated = ref.deactivated; 1379 | var activated = ref.activated; 1380 | 1381 | var queue = [].concat( 1382 | // in-component leave guards 1383 | extractLeaveGuards(deactivated), 1384 | // global before hooks 1385 | this.router.beforeHooks, 1386 | // enter guards 1387 | activated.map(function (m) { return m.beforeEnter; }), 1388 | // async components 1389 | resolveAsyncComponents(activated) 1390 | ) 1391 | 1392 | this.pending = route 1393 | var iterator = function (hook, next) { 1394 | if (this$1.pending !== route) { 1395 | return abort() 1396 | } 1397 | hook(route, current, function (to) { 1398 | if (to === false) { 1399 | // next(false) -> abort navigation, ensure current URL 1400 | this$1.ensureURL(true) 1401 | abort() 1402 | } else if (typeof to === 'string' || typeof to === 'object') { 1403 | // next('/') or next({ path: '/' }) -> redirect 1404 | (typeof to === 'object' && to.replace) ? this$1.replace(to) : this$1.push(to) 1405 | abort() 1406 | } else { 1407 | // confirm transition and pass on the value 1408 | next(to) 1409 | } 1410 | }) 1411 | } 1412 | 1413 | runQueue(queue, iterator, function () { 1414 | var postEnterCbs = [] 1415 | var enterGuards = extractEnterGuards(activated, postEnterCbs, function () { 1416 | return this$1.current === route 1417 | }) 1418 | // wait until async components are resolved before 1419 | // extracting in-component enter guards 1420 | runQueue(enterGuards, iterator, function () { 1421 | if (this$1.pending !== route) { 1422 | return abort() 1423 | } 1424 | this$1.pending = null 1425 | onComplete(route) 1426 | if (this$1.router.app) { 1427 | this$1.router.app.$nextTick(function () { 1428 | postEnterCbs.forEach(function (cb) { return cb(); }) 1429 | }) 1430 | } 1431 | }) 1432 | }) 1433 | }; 1434 | 1435 | History.prototype.updateRoute = function updateRoute (route) { 1436 | var prev = this.current 1437 | this.current = route 1438 | this.cb && this.cb(route) 1439 | this.router.afterHooks.forEach(function (hook) { 1440 | hook && hook(route, prev) 1441 | }) 1442 | }; 1443 | 1444 | function normalizeBase (base) { 1445 | if (!base) { 1446 | if (inBrowser) { 1447 | // respect tag 1448 | var baseEl = document.querySelector('base') 1449 | base = baseEl ? baseEl.getAttribute('href') : '/' 1450 | } else { 1451 | base = '/' 1452 | } 1453 | } 1454 | // make sure there's the starting slash 1455 | if (base.charAt(0) !== '/') { 1456 | base = '/' + base 1457 | } 1458 | // remove trailing slash 1459 | return base.replace(/\/$/, '') 1460 | } 1461 | 1462 | function resolveQueue ( 1463 | current, 1464 | next 1465 | ) { 1466 | var i 1467 | var max = Math.max(current.length, next.length) 1468 | for (i = 0; i < max; i++) { 1469 | if (current[i] !== next[i]) { 1470 | break 1471 | } 1472 | } 1473 | return { 1474 | activated: next.slice(i), 1475 | deactivated: current.slice(i) 1476 | } 1477 | } 1478 | 1479 | function extractGuard ( 1480 | def, 1481 | key 1482 | ) { 1483 | if (typeof def !== 'function') { 1484 | // extend now so that global mixins are applied. 1485 | def = _Vue.extend(def) 1486 | } 1487 | return def.options[key] 1488 | } 1489 | 1490 | function extractLeaveGuards (matched) { 1491 | return flatten(flatMapComponents(matched, function (def, instance) { 1492 | var guard = extractGuard(def, 'beforeRouteLeave') 1493 | if (guard) { 1494 | return Array.isArray(guard) 1495 | ? guard.map(function (guard) { return wrapLeaveGuard(guard, instance); }) 1496 | : wrapLeaveGuard(guard, instance) 1497 | } 1498 | }).reverse()) 1499 | } 1500 | 1501 | function wrapLeaveGuard ( 1502 | guard, 1503 | instance 1504 | ) { 1505 | return function routeLeaveGuard () { 1506 | return guard.apply(instance, arguments) 1507 | } 1508 | } 1509 | 1510 | function extractEnterGuards ( 1511 | matched, 1512 | cbs, 1513 | isValid 1514 | ) { 1515 | return flatten(flatMapComponents(matched, function (def, _, match, key) { 1516 | var guard = extractGuard(def, 'beforeRouteEnter') 1517 | if (guard) { 1518 | return Array.isArray(guard) 1519 | ? guard.map(function (guard) { return wrapEnterGuard(guard, cbs, match, key, isValid); }) 1520 | : wrapEnterGuard(guard, cbs, match, key, isValid) 1521 | } 1522 | })) 1523 | } 1524 | 1525 | function wrapEnterGuard ( 1526 | guard, 1527 | cbs, 1528 | match, 1529 | key, 1530 | isValid 1531 | ) { 1532 | return function routeEnterGuard (to, from, next) { 1533 | return guard(to, from, function (cb) { 1534 | next(cb) 1535 | if (typeof cb === 'function') { 1536 | cbs.push(function () { 1537 | // #750 1538 | // if a router-view is wrapped with an out-in transition, 1539 | // the instance may not have been registered at this time. 1540 | // we will need to poll for registration until current route 1541 | // is no longer valid. 1542 | poll(cb, match.instances, key, isValid) 1543 | }) 1544 | } 1545 | }) 1546 | } 1547 | } 1548 | 1549 | function poll ( 1550 | cb, // somehow flow cannot infer this is a function 1551 | instances, 1552 | key, 1553 | isValid 1554 | ) { 1555 | if (instances[key]) { 1556 | cb(instances[key]) 1557 | } else if (isValid()) { 1558 | setTimeout(function () { 1559 | poll(cb, instances, key, isValid) 1560 | }, 16) 1561 | } 1562 | } 1563 | 1564 | function resolveAsyncComponents (matched) { 1565 | return flatMapComponents(matched, function (def, _, match, key) { 1566 | // if it's a function and doesn't have Vue options attached, 1567 | // assume it's an async component resolve function. 1568 | // we are not using Vue's default async resolving mechanism because 1569 | // we want to halt the navigation until the incoming component has been 1570 | // resolved. 1571 | if (typeof def === 'function' && !def.options) { 1572 | return function (to, from, next) { 1573 | var resolve = function (resolvedDef) { 1574 | match.components[key] = resolvedDef 1575 | next() 1576 | } 1577 | 1578 | var reject = function (reason) { 1579 | warn(false, ("Failed to resolve async component " + key + ": " + reason)) 1580 | next(false) 1581 | } 1582 | 1583 | var res = def(resolve, reject) 1584 | if (res && typeof res.then === 'function') { 1585 | res.then(resolve, reject) 1586 | } 1587 | } 1588 | } 1589 | }) 1590 | } 1591 | 1592 | function flatMapComponents ( 1593 | matched, 1594 | fn 1595 | ) { 1596 | return flatten(matched.map(function (m) { 1597 | return Object.keys(m.components).map(function (key) { return fn( 1598 | m.components[key], 1599 | m.instances[key], 1600 | m, key 1601 | ); }) 1602 | })) 1603 | } 1604 | 1605 | function flatten (arr) { 1606 | return Array.prototype.concat.apply([], arr) 1607 | } 1608 | 1609 | /* */ 1610 | 1611 | var positionStore = Object.create(null) 1612 | 1613 | function saveScrollPosition (key) { 1614 | if (!key) { return } 1615 | positionStore[key] = { 1616 | x: window.pageXOffset, 1617 | y: window.pageYOffset 1618 | } 1619 | } 1620 | 1621 | function getScrollPosition (key) { 1622 | if (!key) { return } 1623 | return positionStore[key] 1624 | } 1625 | 1626 | function getElementPosition (el) { 1627 | var docRect = document.documentElement.getBoundingClientRect() 1628 | var elRect = el.getBoundingClientRect() 1629 | return { 1630 | x: elRect.left - docRect.left, 1631 | y: elRect.top - docRect.top 1632 | } 1633 | } 1634 | 1635 | function isValidPosition (obj) { 1636 | return isNumber(obj.x) || isNumber(obj.y) 1637 | } 1638 | 1639 | function normalizePosition (obj) { 1640 | return { 1641 | x: isNumber(obj.x) ? obj.x : window.pageXOffset, 1642 | y: isNumber(obj.y) ? obj.y : window.pageYOffset 1643 | } 1644 | } 1645 | 1646 | function isNumber (v) { 1647 | return typeof v === 'number' 1648 | } 1649 | 1650 | /* */ 1651 | 1652 | 1653 | var genKey = function () { return String(Date.now()); } 1654 | var _key = genKey() 1655 | 1656 | var HTML5History = (function (History) { 1657 | function HTML5History (router, base) { 1658 | var this$1 = this; 1659 | 1660 | History.call(this, router, base) 1661 | 1662 | var expectScroll = router.options.scrollBehavior 1663 | window.addEventListener('popstate', function (e) { 1664 | _key = e.state && e.state.key 1665 | var current = this$1.current 1666 | this$1.transitionTo(getLocation(this$1.base), function (next) { 1667 | if (expectScroll) { 1668 | this$1.handleScroll(next, current, true) 1669 | } 1670 | }) 1671 | }) 1672 | 1673 | if (expectScroll) { 1674 | window.addEventListener('scroll', function () { 1675 | saveScrollPosition(_key) 1676 | }) 1677 | } 1678 | } 1679 | 1680 | if ( History ) HTML5History.__proto__ = History; 1681 | HTML5History.prototype = Object.create( History && History.prototype ); 1682 | HTML5History.prototype.constructor = HTML5History; 1683 | 1684 | HTML5History.prototype.go = function go (n) { 1685 | window.history.go(n) 1686 | }; 1687 | 1688 | HTML5History.prototype.push = function push (location) { 1689 | var this$1 = this; 1690 | 1691 | var current = this.current 1692 | this.transitionTo(location, function (route) { 1693 | pushState(cleanPath(this$1.base + route.fullPath)) 1694 | this$1.handleScroll(route, current, false) 1695 | }) 1696 | }; 1697 | 1698 | HTML5History.prototype.replace = function replace (location) { 1699 | var this$1 = this; 1700 | 1701 | var current = this.current 1702 | this.transitionTo(location, function (route) { 1703 | replaceState(cleanPath(this$1.base + route.fullPath)) 1704 | this$1.handleScroll(route, current, false) 1705 | }) 1706 | }; 1707 | 1708 | HTML5History.prototype.ensureURL = function ensureURL (push) { 1709 | if (getLocation(this.base) !== this.current.fullPath) { 1710 | var current = cleanPath(this.base + this.current.fullPath) 1711 | push ? pushState(current) : replaceState(current) 1712 | } 1713 | }; 1714 | 1715 | HTML5History.prototype.handleScroll = function handleScroll (to, from, isPop) { 1716 | var router = this.router 1717 | if (!router.app) { 1718 | return 1719 | } 1720 | 1721 | var behavior = router.options.scrollBehavior 1722 | if (!behavior) { 1723 | return 1724 | } 1725 | if ("development" !== 'production') { 1726 | assert(typeof behavior === 'function', "scrollBehavior must be a function") 1727 | } 1728 | 1729 | // wait until re-render finishes before scrolling 1730 | router.app.$nextTick(function () { 1731 | var position = getScrollPosition(_key) 1732 | var shouldScroll = behavior(to, from, isPop ? position : null) 1733 | if (!shouldScroll) { 1734 | return 1735 | } 1736 | var isObject = typeof shouldScroll === 'object' 1737 | if (isObject && typeof shouldScroll.selector === 'string') { 1738 | var el = document.querySelector(shouldScroll.selector) 1739 | if (el) { 1740 | position = getElementPosition(el) 1741 | } else if (isValidPosition(shouldScroll)) { 1742 | position = normalizePosition(shouldScroll) 1743 | } 1744 | } else if (isObject && isValidPosition(shouldScroll)) { 1745 | position = normalizePosition(shouldScroll) 1746 | } 1747 | 1748 | if (position) { 1749 | window.scrollTo(position.x, position.y) 1750 | } 1751 | }) 1752 | }; 1753 | 1754 | return HTML5History; 1755 | }(History)); 1756 | 1757 | function getLocation (base) { 1758 | var path = window.location.pathname 1759 | if (base && path.indexOf(base) === 0) { 1760 | path = path.slice(base.length) 1761 | } 1762 | return (path || '/') + window.location.search + window.location.hash 1763 | } 1764 | 1765 | function pushState (url, replace) { 1766 | // try...catch the pushState call to get around Safari 1767 | // DOM Exception 18 where it limits to 100 pushState calls 1768 | var history = window.history 1769 | try { 1770 | if (replace) { 1771 | history.replaceState({ key: _key }, '', url) 1772 | } else { 1773 | _key = genKey() 1774 | history.pushState({ key: _key }, '', url) 1775 | } 1776 | saveScrollPosition(_key) 1777 | } catch (e) { 1778 | window.location[replace ? 'assign' : 'replace'](url) 1779 | } 1780 | } 1781 | 1782 | function replaceState (url) { 1783 | pushState(url, true) 1784 | } 1785 | 1786 | /* */ 1787 | 1788 | 1789 | var HashHistory = (function (History) { 1790 | function HashHistory (router, base, fallback) { 1791 | History.call(this, router, base) 1792 | // check history fallback deeplinking 1793 | if (fallback && this.checkFallback()) { 1794 | return 1795 | } 1796 | ensureSlash() 1797 | } 1798 | 1799 | if ( History ) HashHistory.__proto__ = History; 1800 | HashHistory.prototype = Object.create( History && History.prototype ); 1801 | HashHistory.prototype.constructor = HashHistory; 1802 | 1803 | HashHistory.prototype.checkFallback = function checkFallback () { 1804 | var location = getLocation(this.base) 1805 | if (!/^\/#/.test(location)) { 1806 | window.location.replace( 1807 | cleanPath(this.base + '/#' + location) 1808 | ) 1809 | return true 1810 | } 1811 | }; 1812 | 1813 | HashHistory.prototype.onHashChange = function onHashChange () { 1814 | if (!ensureSlash()) { 1815 | return 1816 | } 1817 | this.transitionTo(getHash(), function (route) { 1818 | replaceHash(route.fullPath) 1819 | }) 1820 | }; 1821 | 1822 | HashHistory.prototype.push = function push (location) { 1823 | this.transitionTo(location, function (route) { 1824 | pushHash(route.fullPath) 1825 | }) 1826 | }; 1827 | 1828 | HashHistory.prototype.replace = function replace (location) { 1829 | this.transitionTo(location, function (route) { 1830 | replaceHash(route.fullPath) 1831 | }) 1832 | }; 1833 | 1834 | HashHistory.prototype.go = function go (n) { 1835 | window.history.go(n) 1836 | }; 1837 | 1838 | HashHistory.prototype.ensureURL = function ensureURL (push) { 1839 | var current = this.current.fullPath 1840 | if (getHash() !== current) { 1841 | push ? pushHash(current) : replaceHash(current) 1842 | } 1843 | }; 1844 | 1845 | return HashHistory; 1846 | }(History)); 1847 | 1848 | function ensureSlash () { 1849 | var path = getHash() 1850 | if (path.charAt(0) === '/') { 1851 | return true 1852 | } 1853 | replaceHash('/' + path) 1854 | return false 1855 | } 1856 | 1857 | function getHash () { 1858 | // We can't use window.location.hash here because it's not 1859 | // consistent across browsers - Firefox will pre-decode it! 1860 | var href = window.location.href 1861 | var index = href.indexOf('#') 1862 | return index === -1 ? '' : href.slice(index + 1) 1863 | } 1864 | 1865 | function pushHash (path) { 1866 | window.location.hash = path 1867 | } 1868 | 1869 | function replaceHash (path) { 1870 | var i = window.location.href.indexOf('#') 1871 | window.location.replace( 1872 | window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path 1873 | ) 1874 | } 1875 | 1876 | /* */ 1877 | 1878 | 1879 | var AbstractHistory = (function (History) { 1880 | function AbstractHistory (router) { 1881 | History.call(this, router) 1882 | this.stack = [] 1883 | this.index = -1 1884 | } 1885 | 1886 | if ( History ) AbstractHistory.__proto__ = History; 1887 | AbstractHistory.prototype = Object.create( History && History.prototype ); 1888 | AbstractHistory.prototype.constructor = AbstractHistory; 1889 | 1890 | AbstractHistory.prototype.push = function push (location) { 1891 | var this$1 = this; 1892 | 1893 | this.transitionTo(location, function (route) { 1894 | this$1.stack = this$1.stack.slice(0, this$1.index + 1).concat(route) 1895 | this$1.index++ 1896 | }) 1897 | }; 1898 | 1899 | AbstractHistory.prototype.replace = function replace (location) { 1900 | var this$1 = this; 1901 | 1902 | this.transitionTo(location, function (route) { 1903 | this$1.stack = this$1.stack.slice(0, this$1.index).concat(route) 1904 | }) 1905 | }; 1906 | 1907 | AbstractHistory.prototype.go = function go (n) { 1908 | var this$1 = this; 1909 | 1910 | var targetIndex = this.index + n 1911 | if (targetIndex < 0 || targetIndex >= this.stack.length) { 1912 | return 1913 | } 1914 | var route = this.stack[targetIndex] 1915 | this.confirmTransition(route, function () { 1916 | this$1.index = targetIndex 1917 | this$1.updateRoute(route) 1918 | }) 1919 | }; 1920 | 1921 | AbstractHistory.prototype.ensureURL = function ensureURL () { 1922 | // noop 1923 | }; 1924 | 1925 | return AbstractHistory; 1926 | }(History)); 1927 | 1928 | /* */ 1929 | 1930 | var VueRouter = function VueRouter (options) { 1931 | if ( options === void 0 ) options = {}; 1932 | 1933 | this.app = null 1934 | this.options = options 1935 | this.beforeHooks = [] 1936 | this.afterHooks = [] 1937 | this.match = createMatcher(options.routes || []) 1938 | 1939 | var mode = options.mode || 'hash' 1940 | this.fallback = mode === 'history' && !supportsHistory 1941 | if (this.fallback) { 1942 | mode = 'hash' 1943 | } 1944 | if (!inBrowser) { 1945 | mode = 'abstract' 1946 | } 1947 | this.mode = mode 1948 | 1949 | switch (mode) { 1950 | case 'history': 1951 | this.history = new HTML5History(this, options.base) 1952 | break 1953 | case 'hash': 1954 | this.history = new HashHistory(this, options.base, this.fallback) 1955 | break 1956 | case 'abstract': 1957 | this.history = new AbstractHistory(this) 1958 | break 1959 | default: 1960 | "development" !== 'production' && assert(false, ("invalid mode: " + mode)) 1961 | } 1962 | }; 1963 | 1964 | var prototypeAccessors = { currentRoute: {} }; 1965 | 1966 | prototypeAccessors.currentRoute.get = function () { 1967 | return this.history && this.history.current 1968 | }; 1969 | 1970 | VueRouter.prototype.init = function init (app /* Vue component instance */) { 1971 | var this$1 = this; 1972 | 1973 | "development" !== 'production' && assert( 1974 | install.installed, 1975 | "not installed. Make sure to call `Vue.use(VueRouter)` " + 1976 | "before creating root instance." 1977 | ) 1978 | 1979 | this.app = app 1980 | 1981 | var history = this.history 1982 | 1983 | if (history instanceof HTML5History) { 1984 | history.transitionTo(getLocation(history.base), initialLoad, initialLoad) 1985 | } else if (history instanceof HashHistory) { 1986 | var setupHashListener = function () { 1987 | window.addEventListener('hashchange', function () { 1988 | history.onHashChange() 1989 | }) 1990 | initialLoad() 1991 | } 1992 | history.transitionTo(getHash(), setupHashListener, setupHashListener) 1993 | } 1994 | 1995 | history.listen(function (route) { 1996 | this$1.app._route = route 1997 | }) 1998 | }; 1999 | 2000 | VueRouter.prototype.beforeEach = function beforeEach (fn) { 2001 | this.beforeHooks.push(fn) 2002 | }; 2003 | 2004 | VueRouter.prototype.afterEach = function afterEach (fn) { 2005 | this.afterHooks.push(fn) 2006 | }; 2007 | 2008 | VueRouter.prototype.push = function push (location) { 2009 | this.history.push(location) 2010 | }; 2011 | 2012 | VueRouter.prototype.replace = function replace (location) { 2013 | this.history.replace(location) 2014 | }; 2015 | 2016 | VueRouter.prototype.go = function go (n) { 2017 | this.history.go(n) 2018 | }; 2019 | 2020 | VueRouter.prototype.back = function back () { 2021 | this.go(-1) 2022 | }; 2023 | 2024 | VueRouter.prototype.forward = function forward () { 2025 | this.go(1) 2026 | }; 2027 | 2028 | VueRouter.prototype.getMatchedComponents = function getMatchedComponents (to) { 2029 | var route = to 2030 | ? this.resolve(to).resolved 2031 | : this.currentRoute 2032 | if (!route) { 2033 | return [] 2034 | } 2035 | return [].concat.apply([], route.matched.map(function (m) { 2036 | return Object.keys(m.components).map(function (key) { 2037 | return m.components[key] 2038 | }) 2039 | })) 2040 | }; 2041 | 2042 | VueRouter.prototype.resolve = function resolve ( 2043 | to, 2044 | current, 2045 | append 2046 | ) { 2047 | var normalizedTo = normalizeLocation(to, current || this.history.current, append) 2048 | var resolved = this.match(normalizedTo, current) 2049 | var fullPath = resolved.redirectedFrom || resolved.fullPath 2050 | var base = this.history.base 2051 | var href = createHref(base, fullPath, this.mode) 2052 | return { 2053 | normalizedTo: normalizedTo, 2054 | resolved: resolved, 2055 | href: href 2056 | } 2057 | }; 2058 | 2059 | Object.defineProperties( VueRouter.prototype, prototypeAccessors ); 2060 | 2061 | function createHref (base, fullPath, mode) { 2062 | var path = mode === 'hash' ? '#' + fullPath : fullPath 2063 | return base ? cleanPath(base + '/' + path) : path 2064 | } 2065 | 2066 | VueRouter.install = install 2067 | 2068 | if (inBrowser && window.Vue) { 2069 | window.Vue.use(VueRouter) 2070 | } 2071 | 2072 | return VueRouter; 2073 | 2074 | }))); 2075 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-advanced-programming", 3 | "version": "1.0.0", 4 | "description": "A collection of tricks in [Vue.js](https://github.com/vuejs/vue).", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "python3 -m http.server" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/HerringtonDarkholme/vue-advanced-programming.git" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/HerringtonDarkholme/vue-advanced-programming/issues" 17 | }, 18 | "homepage": "https://github.com/HerringtonDarkholme/vue-advanced-programming#readme", 19 | "dependencies": { 20 | "vue": "^2.0.5" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /template-slot/helper.js: -------------------------------------------------------------------------------- 1 | Vue.component('v-template', {}) 2 | 3 | Vue.component('v-outlet', { 4 | props: { 5 | source: { 6 | type: String, 7 | default: 'default', 8 | }, 9 | bindTo: { 10 | type: Vue 11 | }, 12 | $ctx: {} 13 | }, 14 | created() { 15 | let $parent = this.bindTo || this.$parent 16 | let slots = $parent && $parent.$slots 17 | let vnodes = slots && slots[this.source] 18 | let vnode = vnodes && vnodes[0] 19 | let template = vnode && vnode.data && vnode.data.inlineTemplate 20 | if (!template) { 21 | this.$options.render = function(h) { 22 | let fallbacks = this.$slots.default 23 | return (fallbacks && fallbacks[0]) || h('') 24 | } 25 | return 26 | } 27 | this.$options.render = template.render 28 | this.$options.staticRenderFns = template.staticRenderFns 29 | } 30 | }) 31 | -------------------------------------------------------------------------------- /template-slot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | template slot demo 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-slot/index.js: -------------------------------------------------------------------------------- 1 | const mitm = { 2 | template: `
MITM
`, 3 | name: 'mitm' 4 | } 5 | 6 | const repeat = { 7 | template: ` 8 |

9 | {{repeat}}
10 | 11 | I'm default content!
12 |
13 | 14 | I'm default content!
15 |
16 | 17 | 18 | I wil not be shown!
19 |
20 |
21 |

`, 22 | data: () => ({repeat: 3}), 23 | components: {mitm}, 24 | name: 'repeat' 25 | } 26 | 27 | new Vue({ 28 | template: ` 29 | 30 | 31 | 32 | I am default!
33 |
34 | 35 | 36 | I will not be repeted.
37 |
38 | 39 | 40 | I will be repeted for {{$ctx.i}} times
41 |
42 |
`, 43 | components: { repeat }, 44 | el: '#app' 45 | }) 46 | --------------------------------------------------------------------------------