vue-router 运行机制及底层原理

1.测试页面

index.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		.router-link-active{color: red;}

	</style>

</head>

<body>

	<!--

		路由：异步加载

	-->

	<!--VueJs核心库-->

	<script src="vue.js"></script>

	<!--Router-->

	<script src="vue-router.js"></script>

	<div id="app">

		<h1>Hello App</h1>

		<!--router-link被渲染成a标签,为什么直接用a标签而用router-link?-->

		<router-link to="/index">Go to Index</router-link>

		<router-link to="/subpage">Go to SubPage</router-link>

		<!--渲染位置-->

		<router-view></router-view>

	</div>

	<script>

		//VueJS的router-link,在没有使用之前,不会对任何Tag(标签)起到任何作用

		//const和var一样都是声明变量的,ES6语法,const(声明常量)

		//两套模板

		const Foo = {template:'<div>Index</div>'}

		const Bar = {template:'<div>SubPage</div>'}

		const routes = [ // 配置

			//{路由名称：名字和路径,模板：模板的变量}

			{path:'/index',component:Foo},

			{path:'/subpage',component:Bar}

		]

		const router = new VueRouter({ // 得到VueRouter的实例

			routes

		});

		// new Vue({

		// 	el:"#app", // 指定渲染位置

		// 	data:{ // 数据

		// 		message:'Hello App'

		// 	}

		// });

		const app = new Vue({ //在一个地方传入的是一个对象,需要一对大括号

			router

		}).$mount('#app'); //指定位置

	</script>

</body>

</html>

index2.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		.router-link-active{color: red;}

	</style>

</head>

<body>

	<div id="app">

		<div>

			<router-link to="/user/foo">/user/foo</router-link>

		</div>

		<div>

			<router-link to="/user/bar">/user/bar</router-link>

		</div>

		<div>

			<router-view></router-view>

		</div>

	</div>

	<!--VueJs核心库-->

	<script src="vue.js"></script>

	<!--Router-->

	<script src="vue-router.js"></script>

	<!--配置动态路由-->

	<script>

		const User = {

			template:`<div>User:{{$route.params.id}}</div>`

		}

		const router = new VueRouter({

			routes:[

				{path:'/user/:id',component:User}

			]

		});

		const app = new Vue({router}).$mount('#app');

	</script>

</body>

</html>

2.函数封装

index3.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		.router-link-active{color: red;}

	</style>

</head>

<body>

	<a href="#/index?index=1">异步加载首页</a>

	<a href="#/list?list=1">异步加载列表</a>

	<a href="#/detail?detail=1">异步加载详情</a>

	<a href="#/detail2?detail2=1">异步加载详情2</a>

	<div id="content">

		默认

	</div>

	<script src="myroute.js"></script>

	<script>

		// window.addEventListener('hashchange',function() { // 监听URL的改变

		// 	console.log("Hello");

		// });

		spaRouters.init();

		/*

		1.开发都是异步的

		*/

		spaRouters.map("/index",function(transition){

			spaRouters.asyncFun("index.js",transition)

		})

		spaRouters.map("/list",function(transition){

			spaRouters.asyncFun("list.js",transition)

		})

	</script>

</body>

</html>

index.js

SPA_RESOLVE_INIT = function (transition) {

	document.getElementById("content").innerHTML = "当前是渲染的页面";

}

list.js

SPA_RESOLVE_INIT = function (transition) {

	document.getElementById("content").innerHTML = "当前是渲染的页面";

}

myroute.js

(function() { // 匿名函数,让代码处于局部

	// 通过监听,改变页面的显示

	function spaRouters() {

		this.routers = {}; // 保存注册所有路由,也可以理解为缓存

	}

	var util = { // 声明公共类

		getParamsUrl:function(){ // 获取路由的路径和参数

			var hasDetail = location.hash.split("?");

			var hasName = hasDetail[0].split("#")[1]; // 得到路由地址

			var params = hasDetail[1]?hasDetail[1].split("&"):[]; // 得到参数

			var query = {};

			for (var i = 0; i < params.length; i++) {

				var item = params[i].split("=");

				query[item[0]] = item[1];

			}

			return {

				path:hasName,

				query:query

			}; // 返回一个路由名称

		}

	}

	// 一块业务

	spaRouters.prototype = {

		init:function(){

			var self = this;

			window.addEventListener('hashchange',function() { // 监听URL的改变

				// 只是知道发生了改变,并不知道路径,需要路由处理

				self.urlChange();

			});

			window.addEventListener('load',function() { // 监听URL的改变

				// 只是知道发生了改变,并不知道路径,需要路由处理

				self.urlChange();

			});

		},

		refresh:function(currentHash){ // 加载

			var self = this;

			if (self.beforeFun) {

				self.beforeFun({

					to:{

						path:currentHash.path,

						query:currentHash.query

					},

					next:function(){

						self.routers[currentHash.path].callback.call(self,currentHash);

					}

				})

			}else{

				self.routers[currentHash.path].callback.call(self,currentHash);

			}

		},

		// URL 路由处理

		urlChange:function(){

			var currentHash = util.getParamsUrl();

			if(this.routers[currentHash.path]){

				this.refresh(currentHash);

			}

		},

		// 仅仅作为注册路由

		map:function(path,callback){

			// 清除空格

			path = path.replace(/\s*/g,""); // 过滤空格

			if(callback && Object.prototype.toString.call(callback) === "[object Function]"){

				this.routers[path] = {

					callback:callback,

					fn:null // 缓存异步文件状态

				}

			}else{

				console.trace("注册"+path+"需要注册回调信息");

			}

		},

		asyncFun:function(file,transition){

			var self = this;

			if(self.routers[transition.path].fn){

				self.afterFun && self.afterFun(transition)

				self.routers[transition.path].fn(transition)

			}else{

				console.log("开始异步下载js文件"+file);

				var _body = document.getElementsByTagName("body")[0];

				var scriptEle = document.createElement("script");

				scriptEle.type = 'text/javascript';

				scriptEle.src = file;

				scriptEle.async = true;

				SPA_RESOLVE_INIT = null;

				scriptEle.onload = function(){ // 加载文件之后

					console.log("下载"+file+"完成");

					self.afterFun && self.afterFun(transition)

					self.routers[transition.path].fn = SPA_RESOLVE_INIT;

					self.routers[transition.path].fn(transition)

				}

				_body.appendChild(scriptEle);

			}

		}

	}

	window.spaRouters = new spaRouters(); // 注册到全局

})();

vue-router 运行机制及底层原理的更多相关文章

php--->底层的运行机制与数据结构原理
PHP 底层的运行机制与数据结构原理 1. PHP的设计理念及特点多进程模型:由于PHP是多进程模型,不同请求间互不干涉,这样保证了一个请求挂掉不会对全盘服务造成影响,当然,随着时代发展,PHP也早 ...
Vue异步更新机制以及$nextTick原理
相信很多人会好奇Vue内部的更新机制,或者平时工作中遇到的一些奇怪的问题需要使用$nextTick来解决,今天我们就来聊一聊Vue中的异步更新机制以及$nextTick原理 Vue的异步更新可能你还 ...
Java并发（二）—— 并发编程的挑战与并发机制的底层原理
单核处理器也可以支持多线程,因为CPU是通过时间片分配算法来循环执行任务多线程一定比单线程快么?不一定,因为线程创建和上下文切换都需要开销. 如何减少上下文切换无锁并发编程 CAS算法使用最少线 ...
PHP的运行机制与原理(底层) [转]
说到php的运行机制还要先给大家介绍php的模块,PHP总共有三个模块:内核.Zend引擎.以及扩展层:PHP内核用来处理请求.文件流.错误处理等相关操作:Zend引擎(ZE)用以将源文件转换成机器语 ...
PHP的运行机制与原理(底层)
原文:http://www.jb51.net/article/74907.htm 说到php的运行机制还要先给大家介绍php的模块,PHP总共有三个模块:内核.Zend引擎.以及扩展层:PHP内核用来 ...
微信小程序底层原理与运行机制类文章学习
参考文档小程序底层实现原理及一些思考为了安全和管控, 双线程执行 Web Worker执行用户的代码; UI线程执行大部分的功能. 微信小程序架构原理只通过mvvm模板语法动态改变页面, 不支持 ...
【Spark 深入学习 04】再说Spark底层运行机制
本节内容 · spark底层执行机制 · 细说RDD构建过程 · Job Stage的划分算法 · Task最佳计算位置算法一.spark底层执行机制对于Spark底层的运行原理,找到了一副很好的 ...
PHP5底层原理之垃圾回收机制
概念垃圾回收机制是一种内存动态分配的方案,它会自动释放程序不再使用的已分配的内存块. 垃圾回收机制可以让程序员不必过分关心程序内存分配,从而将更多的精力投入到业务逻辑. 与之相关的一个概念,内存 ...
Java 并发系列之二：java 并发机制的底层实现原理
1. 处理器实现原子操作 2. volatile /** 补充: 主要作用:内存可见性,是变量在多个线程中可见,修饰变量,解决一写多读的问题. 轻量级的synchronized,不会造成阻塞.性能比s ...

随机推荐

HTML中打开新页面的方法
HTML跳转新窗口的方法笔试遇到这样的一个问题,特意整理一下. 方法一纯HTML <a href="http://www.cnblogs.com" target=&quo ...
转载：Posix线程编程指南(2)
概念及作用在单线程程序中,我们经常要用到"全局变量"以实现多个函数间共享数据.在多线程环境下,由于数据空间是共享的,因此全局变量也为所有线程所共有.但有时应用程序设计中有必要提供 ...
疫情控制（NOIP2012）庆祝2012满贯！٩(๑•◡-๑)۶ⒽⓤⒼ
丧病至极的D2T3啊! 好吧~ 先放个传送门~ 原题传送门好吧,这道题呢.. 根据题意我们可以很明显的看出来军队往上走的越多(在没到根节点之前),效益一定越大.. 所以可以分情况讨论: 对于无法走 ...
【linux高级程序设计】（第十二章）Linux多线程编程 2
线程同步机制互斥锁通信机制 int pthread_mutex_init (pthread_mutex_t *__mutex, __const pthread_mutexattr_t *__mute ...
处理eq问题
using System;using System.Diagnostics;using System.Drawing;using System.IO;using System.Windows.Form ...
【原创】SSIS-执行包任务调用子包且子包读取父包变量
背景: 有时候需要将一个个开发好的独立的ETL包串接起来形成一个独立而庞大的包,如:每家分公司都开发不同的ETL包,最后使用执行包任务来将这些分公司的包给串联起来形成一个独立而完整运行的ETL包,此时 ...
(5)C#工具箱-数据
1.DataSet 2.DataGridView dataGridView是一个显示网络数据的控件 (1)绑定dataSet DataSet ds = new DataSet(); //执行数据库查询 ...
EGS5在linux系统下安装过程
转载自52MC论坛作者:xinruibj 平台:Fedora 13 内核版本为:2.6.33, g77版本为:3.4.6: 用户名为xinrui,下面出现这个文件夹xinrui时,修改为你自己的用户 ...
「CTSC2018」假面
真~签到题qwq 昨天在考场上先写了个70分暴力dp,然后发现好像可以优化.因为结界技能的模型相当于要求出对于每个物品,仅仅不选它的背包是什么.... 于是当场脑补出两种做法: 前缀和后缀背包卷积 ...
Orchard 事件通知小坑
public void GetTagLogRecord(int tagId, string keyword, string area) { var tag = _repositoryTagRecord ...

vue-router 运行机制 及 底层原理

vue-router 运行机制 及 底层原理的更多相关文章

随机推荐

热门专题

vue-router 运行机制及底层原理

vue-router 运行机制及底层原理的更多相关文章