vue-router3 源码注释系列 /src/util/path.js

/* @flow *//***  resolvePath(): 解析路径*  第一个参数： 相对路径，要跳转路径的 pathname。*  第二个参数： 基准路径。*  第三个参数： 是否需要拼接基准地址。*/
export function resolvePath(relative: string,base: string,append?: boolean
): string {//判断 relative 是否是以 “/” 开头。const firstChar = relative.charAt(0)if (firstChar === '/') {//如果是，则认为是绝对路径，不需要拼接基准路径。return relative}//如果以 ? 或者 # 开头，则表示要跳转的路径是 "",则表示是原路径跳转，即刷新本页面。//  所以拼接原来路径的 pathName。if (firstChar === '?' || firstChar === '#') {return base + relative}/*下面的路径是相对路径的情形*///将 base 路径按照 "/" 切分成数组。const stack = base.split('/')// remove trailing segment if:// - not appending// - appending to trailing slash (last segment is empty)//如果需要追加基础路径，且 stack 最后一个元素为 “”,则将最后一个元素移除。if (!append || !stack[stack.length - 1]) {stack.pop()}//relative.replace(/^\//, ''): 去除开头的第一个 /.//然后按照 ‘/’ 进行切割成数组。const segments = relative.replace(/^\//, '').split('/')for (let i = 0; i < segments.length; i++) {const segment = segments[i]//如果是 '..', 则表示当前目录的上一级目录。if (segment === '..') {//则弹出当前目录代表的元素。stack.pop()} else if (segment !== '.') {//如果是 '.', 则表示是当前目录，不需要处理。//否则就是有效路径。被添加到 stack 中。stack.push(segment)}}//之所以要添加一个 '' 在数组的队首，是为了保证 stack.join('/') 是, 是 "" + “/” +... 的情形。//即字符串以 “/”开头。if (stack[0] !== '') {stack.unshift('')}//含有路径信息的数组，转为 “/” 间隔的字符串形式。return stack.join('/')
}/*parsePath():  拆分路径，解析成一个 { path, query, hash } 的对象。第一个参数： path 是 location.url； 或者 this.$router.push("/user/info?name=mengze#a",{ query: {xxx} } )中的 /user/info?name=mengze#a 这一部分内容。*/
export function parsePath(path: string): {path: string,query: string,hash: string,
} {let hash = ''let query = ''//举一个路径的例子： /user/info?name=mengze&age=18#aaa//判断 path 上是否有 # 号const hashIndex = path.indexOf('#')//如果存在 # 号，则将 # 后面的内容记录为 hash。 且将 path 去除 # 之后的内容。if (hashIndex >= 0) {hash = path.slice(hashIndex)path = path.slice(0, hashIndex)}//判断 path 上是否有 ？号const queryIndex = path.indexOf('?')//如果存在 ？ 号。。if (queryIndex >= 0) {//则将 ？ 后面的内容记录为 query stringquery = path.slice(queryIndex + 1)//将 path 含有的 ？以及后面的字符串都去掉。保存的内容只有 window.location.href.pathname 部分。path = path.slice(0, queryIndex)}/*将 path 路径解析为一个 pathName， query，hash 分离的对象。此时的 query 还是个字符串。*/return {path,query,hash,}
}/*** 清理 path 路径中 // 的情形。*/
export function cleanPath(path: string): string {//如果路径中存在连续的多个//，那么替换为只有一个 /。return path.replace(/\/+/g, '/')
}

vue-router3 源码注释系列 /src/util/path.js相关推荐

vue-router3 源码注释系列 /src/util/query.js
/* @flow */import { warn } from './warn'//判断字符为 !'()* 的正则表达式. const encodeReserveRE = /[!'()*]/g /* ...
vue-router3 源码注释系列 /src/util/scroll.js
/* @flow */import type Router from '../index' import { assert } from './warn' //getStateKey: 用于获取时间戳 ...
vue-router3 源码注释系列 /src/util/push-state.js
/* @flow *///用于判断是否是浏览器环境 import { inBrowser } from './dom' //保存滚动的位置(x,y). import { saveScrollPosit ...
vue源码注释系列 /src/module/module.js
import { forEachValue } from "../util";// Base data struct for store's module, package wit ...
vue-router3源码注视系列 /src/index.js
/* @flow *///install: vue.use( VueRouter ) 时调用的 install() 方法. import { install } from './install' // ...
three.js 源码注释（一）./Three.js
商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议转载请保留此句:商域无疆 - 本博客专注于敏捷开发 ...
vue 计算属性_lt;Vue 源码笔记系列6gt;计算属性 computed 的实现
1. 前言原文发布在语雀: <Vue 源码笔记系列6>计算属性 computed 的实现 · 语雀www.yuque.com 上一章我们已经学习过 watch,这一章就来看一下计算属性 ...
vue如何让一句代码只执行一次_lt;Vue 源码笔记系列4gt;异步更新队列与$nextTick...
1. 前言原文发布在语雀: <Vue 源码笔记系列4>异步更新队列与$nextTick · 语雀www.yuque.com 上一章我们讲到了修改数据是如何触发渲染函数的观察者,最终调用 ...
vue源码分析系列二：$mount()和new Watcher()的执行过程
续vue源码分析系列一:new Vue的初始化过程在initMixin()里面调用了$mount() if (vm.$options.el) {vm.$mount(vm.$options.el);/ ...

vue-router3 源码注释系列 /src/util/path.js

vue-router3 源码注释系列 /src/util/path.js相关推荐

最新文章

热门文章