![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue-router3源码解读
望月寄明
学习是件快乐的事情
展开
-
vue-router3源码注视系列 /src/index.js
/* @flow *///install: vue.use( VueRouter ) 时调用的 install() 方法。import { install } from ‘./install’//START: 初始化 route 对象。import { START } from ‘./util/route’//assert, warn: 断言和警告import { assert, warn } from ‘./util/warn’//inBrowser: 判断是不是处于浏览器环境。impor原创 2022-04-18 14:49:09 · 883 阅读 · 0 评论 -
Html5 history对象详解
这个文章记录的是 html5 原生的 history 对象,不是 vue-router 的 history。作用history 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。window.history: 返回当前会话的 history 状态。属性history.length只读,返回一个整数,该证书表示会话历史中元素的数目,包括当前加载的页。history.scrollRestoration允许 web 应用程序在历史导航上显示的设置默认滚动恢复行为。此属性可以原创 2022-04-15 16:13:57 · 1497 阅读 · 0 评论 -
vue-router 官方文档学习
安装npm install vue-router简单使用# 在 main.js 文件中import Vue froom 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter);import User from '@/views/User'import Login from '@/views/Login'let vueRouter = new VueRouter({ routes: [ { path: "/"原创 2022-04-02 15:58:56 · 4960 阅读 · 0 评论 -
vue-router3 源码注释系列 /src/create-matcher.js
/* @flow */import type VueRouter from './index'import { resolvePath } from './util/path'import { assert, warn } from './util/warn'import { createRoute } from './util/route'import { fillParams } from './util/params'import { createRouteMap } from './c原创 2022-03-30 13:52:49 · 343 阅读 · 1 评论 -
vue-router3 源码注释系列 /src/util/query.js
/* @flow */import { warn } from './warn'//判断字符为 !'()* 的正则表达式。const encodeReserveRE = /[!'()*]/g/* 1、c.charCodeAt(0) 获取字符的 ascii 编码,返回的是数字。 2、number.toString(16) 返回 16 进制数字编码的字符串形式。 3、!'()* 转换成的形式为 %21%27%28%29%2a。 */const encodeReserveReplacer原创 2022-03-28 17:02:16 · 1173 阅读 · 0 评论 -
vue-router3 源码注释系列 /src/util/push-state.js
/* @flow *///用于判断是否是浏览器环境import { inBrowser } from './dom'//保存滚动的位置(x,y).import { saveScrollPosition } from './scroll'// genStateKey 生成基于当前时间时间戳的key。// setStateKey 更新key。// getStateKey 获取key。import { genStateKey, setStateKey, getStateKey } from '.原创 2022-03-28 16:59:34 · 844 阅读 · 0 评论 -
vue-router3 源码注释系列 /src/util/path.js
/* @flow *//** * resolvePath(): 解析路径 * 第一个参数: 相对路径,要跳转路径的 pathname。 * 第二个参数: 基准路径。 * 第三个参数: 是否需要拼接基准地址。 */export function resolvePath( relative: string, base: string, append?: boolean): string { //判断 relative 是否是以 “/” 开头。 const first原创 2022-03-28 16:56:56 · 506 阅读 · 0 评论 -
vue-router3 源码注释系列 /src/util/location.js
/* @flow */import type VueRouter from '../index'// parsePath:用于拆分成 { path: string, query: object, hash: string } 的形式。// resolvePath: 用于将相对路径根据 current route 拼接路径成绝对形式的路径。import { parsePath, resolvePath } from './path'//resolveQuery() 将所有的 query 统一到一个原创 2022-03-28 16:55:32 · 853 阅读 · 0 评论 -
vue-router3 源码注释系列 /src/util/scroll.js
/* @flow */import type Router from '../index'import { assert } from './warn'//getStateKey: 用于获取时间戳key; //setStateKey: 用于设置时间戳key;import { getStateKey, setStateKey } from './state-key'//浅拷贝对象的属性。import { extend } from './misc'//用于保存对应的页面的 scrollpo原创 2022-03-25 21:00:16 · 764 阅读 · 0 评论 -
Vue $once 函数
Vue $once 函数1、作用$once 是一个函数,可以为 vue 实例绑定一个自定义事件,但是这个事件只会被触发一次,触发之后就会被移除。 类似的监听函数有: $on.2、使用与 $on(1) $once('xxxx', ()=>{...}) 与 $on('xxx', ()=>{...}) 的用法类似。(2) $once 只监听一次; $on 一直监听。3、使用 $once 清除定时器mounted(){ let count = 1; let timer = se原创 2022-03-25 16:38:57 · 2732 阅读 · 0 评论 -
vue-router3源码注解系列 /src/create-route-map.js
/* @flow *//* 用于路径匹配的正则表达式对象。*/import Regexp from 'path-to-regexp'//用于清理 uri 上连续重复的 / 。import { cleanPath } from './util/path'//断言,警告。import { assert, warn } from './util/warn'/* createRouteMap() 函数: 第一个参数 routes 就是 new VueRouter( { routes原创 2022-03-25 11:29:39 · 577 阅读 · 0 评论 -
vuex,vue-router源码系列注释说明
最近有点忙,不能及时更新对应的注释文章。关于更新内容不适合博客阅读的说明:1、更新内容只是为了自己回顾,以及帮助在看源码的同学可以对比,而不是教人从0到1的学会源码如何实现。所以没注意内容排版。2、vuex3,vuex-persistence 的源码注释的是 github 仓库地址, 能点 star 的说声谢谢。3、vue-router 会在 4-23 号之前更新完,但因为开发任务比较重,只能不定时更新了。4、紧接着是 axios, vue 的源码,然后是 vuex4, vuerouter4,vu原创 2022-03-24 10:02:15 · 465 阅读 · 1 评论 -
vue-router3源码注释系列 /src/install.js
import View from './components/view'import Link from './components/link'//用于保存创建 vue 的实力。export let _Vue/** * import VueRouter from 'vur-router' * Vue.use(VueRouter) 的时候就调用该 install 方法。 * * 注意点: 虽然 install 方法会在 router 创建之前就被调用。但是被混合的方法 { * b原创 2022-03-21 10:26:27 · 336 阅读 · 0 评论