破解复制加密狗 | 易学教程

从入口文件index.js中我们可以看到暴露出了一个VueRouter类,这个就是我们在 vue 项目中引入 vue-router 的时候所用到的new Router() 其中具体内部代码如下(为了方便阅读,省略部分代码)
export default 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}`)
    }
}

}
init () {}
function registerHook (){}
go(){}
push(){}
VueRouter.install = install
VueRouter.version = ‘VERSION’

if (inBrowser && window.Vue) {
window.Vue.use(VueRouter)
}

复制代码从入口文件中我们可以看出里面包含了以下几个主要几个步骤：

初始化路由模式
根据传入的routes参数生成路由状态表
获取当前路由对象
初始化路由函数
注册Hooks等事件
添加install装载函数

install注册函数

上述暴露出的router类中挂载了一个install方法，这里我们对其做一个简要的分析（这也是我们下面实现一个自己路由的思维引导）。在我们引入vue-router并且实例化它的时候，vue-router内部帮助我们将router实例装载入vue的实例中，这样我们才可以在组件中可以直接使用router-link、router-view等组件。以及直接访问this. $router、this.$ route等全局变量，这里主要归功于install.js帮助实现这一个过程,主要分以下几个步骤：

首先引入vue-router后需要利用beforeCreate生命周期进行装载它，用来初始化_routerRoot，_router，_route等数据,
同时设置全局访问变量 $router和$ router
完成router-link和 router-view 两个组件的注册

在源码install.js中可以体现
import View from ‘./components/view’
import Link from ‘./components/link’

export let _Vue

export function install (Vue) {
if (install.installed && _Vue === Vue) return
install.installed = true
_Vue = Vue
// 混入vue实例中
Vue.mixin({
beforeCreate () {
if (isDef(this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots_router = this.$ options.router
this._router.init(this)
Vue.util.defineReactive(this, ‘_route’, this._router.history.current)
} else {
this._routerRoot = (this. $KaTeX parse error: Expected 'EOF', got '&' at position 8: parent &̲& this.$ parent._routerRoot) || this
}
registerInstance(this, this)
},
destroyed () {
registerInstance(this)
}
})
// 设置全局访问变量 $router 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)
}
复制代码上述我们对vue-router的源码做了一个粗略的脉络梳理，下面我们将实现一个简化版的vue-router。在此之前我们需要简单的了解一些知识点
前置知识
我们都知道vue-router提供一个mode参数配置，我们可以设置history 或者是hash 两种参数背后的实现原理也各不相同
hash的实现原理

http://localhost:8080/#login

#符号本身以及它后面的字符称之为hash，可通过window.location.hash属性读取。H5新增了一个hashchange来帮助我们监听浏览器链接的hash值变化。

老 yuan

掘金黄小虫复制代码history的实现原理

http://localhost:8080/login
同样H5也新增了pushState和popstate来帮助我们无感知刷新浏览器url

掘金黄小虫复制代码在我们理清楚无感知刷新url的原理后，我们要基于这些原理封装出一个vue-router 开始实现自己的vue-router

实现install装载方法
首先我们需要初始化一下我们项目结构，新建simple-vue-router.js,根据上面分析，这里我们需要暴露出一个router类,其中需要包含一个install方法
let Vue // 用于保存vue实例
class VueRouter(){ // router类

}
function install(_vue){ // 装载函数

}
export default {
VueRouter,
install
}
复制代码其中的install需要实现以下几点功能

初始化_routerRoot，_router，_route等数据,
设置全局访问变量 $router和$ router
完成router-link和 router-view两个组件的注册

代码如下:
let Vue // 用于保存vue实例
class VueRouter {
// router类
}
VueRouter.install = function(_vue) {
// 装载函数
//每个组件都有 this. $router / this.$ route 所以要mixin一下
Vue = _vue
// 在每个组件中都可以获取到 this. $router与this.$ route，这里进行混入vue实例中
Vue.mixin({
beforeCreate() {
// 如果是根组件则
if (this. $KaTeX parse error: Expected 'EOF', got '&' at position 9: options &̲& this.$ options.router) {
this._root = this //把当前vue实例保存到_root上
this._router = this. $KaTeX parse error: Expected 'EOF', got '}' at position 44: …挂载在_router上 }̲ else { // …$ parent._root
}
// 定义router实例当访问this. $router时即返回router实例 Object.defineProperty(this, '$ router’, {
get() {
return this._root._router
}
})
// 定义route 当访问this. $route时即返回当前页面路由信息 Object.defineProperty(this, '$ route’, {
get() {
return {}
}
})
}
})
// 全局注册 router的两个组件
Vue.component(‘router-link’, {
render(h) {}
})
Vue.component(‘router-view’, {
render(h) {}
})
}
export default VueRouter

复制代码实现router类
上述实现了install方法帮助我们将router挂载在vue实例中,接下来我们需要完善一下router类中的功能。按照上文源码中的分析,我们需要实现以下几点功能：

生成根据传入的rotues参数生成，路由状态表。即如若传入参数为

routes:[
{
path: ‘/’,
name: ‘index’,
component: index
},
{
path: ‘/login’,
name: ‘login’,
component: login
},
{
path: ‘/learn’,
name: ‘learn’,
component: learn
},
]
复制代码将其用path为key,component为value的规律格式化为
{
‘/’:index,
‘/login’:login,
‘/learn’:learn
}
复制代码
定义当前路由变量，通过劫持进行实时渲染对应组件
定义一个函数，具体实现不同模式应对应使用的处理方法

具体代码如下
let Vue // 用于保存vue实例
class VueRouter {
// router类
constructor(options) {
// 默认为hash模式
this.mode = options.mode || ‘hash’
this.routes = options.routes || []
// 路由映射表
this.routeMaps = this.generateMap(this.routes)
// 当前路由
this.currentHistory = new historyRoute()
// 初始化路由函数
this.initRoute()
}
generateMap(routes) {
return routes.reduce((prev, current) => {
prev[current.path] = current.component
return prev
}, {})
}
initRoute() {
// 这里仅处理hash模式与history模式
if (this.mode === ‘hash’) {
// 先判断用户打开时url中有没有hash，没有重定向到#/
location.hash ? ‘’ : (location.hash = ‘/’)
// 监控浏览器load事件,改变当前存储的路由变量
window.addEventListener(‘load’, () => {
this.currentHistory.current = location.hash.slice(1)
})
window.addEventListener(‘hashchange’, () => {
this.currentHistory.current = location.hash.slice(1)
})
} else {
location.pathname ? ‘’ : (location.pathname = ‘/’)
window.addEventListener(‘load’, () => {
this.currentHistory.current = location.pathname
})
window.addEventListener(‘popstate’, () => {
this.currentHistory.current = location.pathname
})
}
}
}
class historyRoute {
constructor() {
this.current = null
}
}
VueRouter.install = function(_vue) {
// 省略部分代码
}
export default VueRouter

复制代码完善代码，实现实时刷新页面视图
在构建完router类之后，我们发现还存在一个问题,那就是当前路由状态currentHistory.current还是静态的,当我们改变当前路由的时候页面并不会显示对应模板。这里我们可以利用vue自身的双向绑定机制实现
具体代码如下
let Vue // 用于保存vue实例
class VueRouter {
// router类
constructor(options) {
// 默认为hash模式
this.mode = options.mode || ‘hash’
this.routes = options.routes || []
// 路由映射表
this.routeMaps = this.generateMap(this.routes)
// 当前路由
this.currentHistory = new historyRoute()
// 初始化路由函数
this.initRoute()
}
generateMap(routes) {
return routes.reduce((prev, current) => {
prev[current.path] = current.component
return prev
}, {})
}
initRoute() {
// 这里仅处理hash模式与history模式
if (this.mode === ‘hash’) {
// 先判断用户打开时url中有没有hash，没有重定向到#/
location.hash ? ‘’ : (location.hash = ‘/’)
// 监控浏览器load事件,改变当前存储的路由变量
window.addEventListener(‘load’, () => {
this.currentHistory.current = location.hash.slice(1)
})
window.addEventListener(‘hashchange’, () => {
this.currentHistory.current = location.hash.slice(1)
})
} else {
location.pathname ? ‘’ : (location.pathname = ‘/’)
window.addEventListener(‘load’, () => {
this.currentHistory.current = location.pathname
})
window.addEventListener(‘popstate’, () => {
this.currentHistory.current = location.pathname
})
}
}
}
class historyRoute {
constructor() {
this.current = null
}
}
VueRouter.install = function(_vue) {
// 装载函数
//每个组件都有 this. $router / this.$ route 所以要mixin一下
Vue = _vue
// 在每个组件中都可以获取到 this. $router与this.$ route，这里进行混入vue实例中
Vue.mixin({
beforeCreate() {
// 如果是根组件则
if (this. $KaTeX parse error: Expected 'EOF', got '&' at position 9: options &̲& this.$ options.router) {
this._root = this //把当前vue实例保存到_root上
this._router = this. $KaTeX parse error: Expected 'EOF', got '}' at position 138: \dotsentHistory) }̲ else { // \dots$ parent._root
}
// 定义router实例当访问this. $router时即返回router实例 Object.defineProperty(this, '$ router’, {
get() {
return this._root._router
}
})
// 定义route 当访问this. $route时即返回当前页面路由信息 Object.defineProperty(this, '$ route’, {
get() {
return {
// 当前路由
current: this._root._router.history.current
}
}
})
}
})
// 全局注册 router的两个组件
Vue.component(‘router-link’, {
props: {
to: String,
tag: String
},
methods: {
handleClick(event) {
// 阻止a标签默认跳转
event && event.preventDefault && event.preventDefault()
let mode = this._self._root._router.mode
let path = this.to
this._self._root._router.currentHistory.current = path
if (mode === ‘hash’) {
window.history.pushState({}, ‘’, ‘#/’ + path.slice(1))
} else {
window.history.pushState({}, ‘’, path.slice(1))
}
}
},
render(h) {
let mode = this._self._root._router.mode
let tag = this.tag || ‘a’
return (
<tag on-click={this.handleClick} href={mode === ‘hash’ ? #${this.to} : this.to}>
{this.$slots.default}

)
}
})
Vue.component(‘router-view’, {
render(h) {
// 这里的current通过上面的劫持已经是动态了
let current = this._self._root._router.currentHistory.current
let routeMap = this._self._root._router.routeMaps
return h(routeMap[current]) // 动态渲染对应组件
}
})
}
export default VueRouter

复制代码到此为止，一个简单的路由管理器已经完成。实际上相对vue-router来说还是缺少了很多诸如导航守卫、动态路由等功能。千里之行始于足下，本篇文章旨在通过简要分析vue-router的原理以及实践一个简单的路由器帮助大家走进vue-router原理的大门，后面的就要靠大家自己坚持继续深入学习了。

来源：CSDN

作者：【weixin-sjk6070】

链接：https://blog.csdn.net/chunzhenwang/article/details/104506434

标签

vue

加密狗

vue-router

install

hash