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 运行机制 及 底层原理的更多相关文章

  1. php--->底层的运行机制与数据结构原理

    PHP 底层的运行机制与数据结构原理 1. PHP的设计理念及特点 多进程模型:由于PHP是多进程模型,不同请求间互不干涉,这样保证了一个请求挂掉不会对全盘服务造成影响,当然,随着时代发展,PHP也早 ...

  2. Vue异步更新机制以及$nextTick原理

    相信很多人会好奇Vue内部的更新机制,或者平时工作中遇到的一些奇怪的问题需要使用$nextTick来解决,今天我们就来聊一聊Vue中的异步更新机制以及$nextTick原理 Vue的异步更新 可能你还 ...

  3. Java并发（二）—— 并发编程的挑战 与 并发机制的底层原理

    单核处理器也可以支持多线程,因为CPU是通过时间片分配算法来循环执行任务 多线程一定比单线程快么?不一定,因为线程创建和上下文切换都需要开销. 如何减少上下文切换 无锁并发编程 CAS算法 使用最少线 ...

  4. PHP的运行机制与原理(底层) [转]

    说到php的运行机制还要先给大家介绍php的模块,PHP总共有三个模块:内核.Zend引擎.以及扩展层:PHP内核用来处理请求.文件流.错误处理等相关操作:Zend引擎(ZE)用以将源文件转换成机器语 ...

  5. PHP的运行机制与原理(底层)

    原文:http://www.jb51.net/article/74907.htm 说到php的运行机制还要先给大家介绍php的模块,PHP总共有三个模块:内核.Zend引擎.以及扩展层:PHP内核用来 ...

  6. 微信小程序底层原理与运行机制类文章学习

    参考文档 小程序底层实现原理及一些思考 为了安全和管控, 双线程执行 Web Worker执行用户的代码; UI线程执行大部分的功能. 微信小程序架构原理 只通过mvvm模板语法动态改变页面, 不支持 ...

  7. 【Spark 深入学习 04】再说Spark底层运行机制

    本节内容 · spark底层执行机制 · 细说RDD构建过程 · Job Stage的划分算法 · Task最佳计算位置算法 一.spark底层执行机制 对于Spark底层的运行原理,找到了一副很好的 ...

  8. PHP5底层原理之垃圾回收机制

    概念 垃圾回收机制 是一种内存动态分配的方案,它会自动释放程序不再使用的已分配的内存块. 垃圾回收机制 可以让程序员不必过分关心程序内存分配,从而将更多的精力投入到业务逻辑. 与之相关的一个概念,内存 ...

  9. Java 并发系列之二：java 并发机制的底层实现原理

    1. 处理器实现原子操作 2. volatile /** 补充: 主要作用:内存可见性,是变量在多个线程中可见,修饰变量,解决一写多读的问题. 轻量级的synchronized,不会造成阻塞.性能比s ...

随机推荐

  1. js j将数字每三位用逗号隔开的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. [bzoj4513][SDOI2016]储能表——数位dp

    题目大意 求 \[\sum_{i = 0}^{n-1}\sum_{j=0}^{m-1} max((i\ xor\ j)\ -\ k,\ 0)\ mod\ p\] 题解 首先,开始并没有看出来这是数位d ...

  3. http模拟登录

    = =其实很简单,写这个的目的呢,是为了练习下Ruby而已 就是post到登录地址,得到cookie,然后以后的请求都用这个cookie就好了. require 'net/http' module E ...

  4. linux系统查看主机序列号

    #dmidecode -t 1 System Information        Manufacturer: IBM        Product Name: System x3650 M3 -[7 ...

  5. java基础练习 17

    import java.util.Scanner; public class Seventheen { /*企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元 ...

  6. Visual Studio跨平台开发(2)：Xamarin.iOS基本控制项介绍

    前言 在上一篇文章中, 我们介绍了Xamarin 以及简单的HelloWorld范例, 这次我们针对iOS的专案目录架构以及基本控制项进行说明. 包含UIButton,UISlider,UISwitc ...

  7. Jquery学习之路(二) 实现table样式的设定

    上一篇jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看<锋利的Jquery>,说实话正在看了.由于正在学习中,我 ...

  8. Struts2 学习笔记——struts.xml文件之Bean的配置

    Struts2的大部分核心组件不是以硬编码的形式写在代码中,而是通过自身的IoC容器来管理的. Struts2以可配置的形式来管理核心组件,所以开发者可以很容易的扩展框架的核心组件.当开发者需要扩展或 ...

  9. mysql的load data,高速将文本文件,插入数据库中

    1语法 LOAD DATA [ LOW_PRIORITY | CONCURRENT ] [ LOCAL ] INFILE 'file_name.txt' [ REPLACE | IGNORE ] IN ...

  10. mysql系列-安装及服务启动

    一.window下的安装 详细见官网 https://dev.mysql.com/doc/refman/5.7/en/windows-installation.html 以 MySQL 5.1 免安装 ...