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 ...
随机推荐
- [bzoj1833][ZJOI2010]count 数字计数——数位dp
题目: (传送门)[http://www.lydsy.com/JudgeOnline/problem.php?id=1833] 题解: 第一次接触数位dp,真的是恶心. 首先翻阅了很多很多一维dp,因 ...
- libyuv编译（各平台）【转】
转自:http://blog.csdn.net/wszawsz33/article/details/51669719 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] Getti ...
- Linux下USB驱动框架分析【转】
转自:http://blog.csdn.net/brucexu1978/article/details/17583407 版权声明:本文为博主原创文章,未经博主允许不得转载. http://www.c ...
- python登陆github
#!/usr/bin/env python # encoding: utf-8 import requests from headers import headers from lxml import ...
- Centos 6.3Yum安装NodeJS
1. 添加epel源: (1)查看机器位数 file /sbin/init 或者 file /bin/ls (2)X64: rpm -ivh http://download.fedoraproject ...
- 读取文本文件时<U+FEFF> 导致的奇怪问题
项目中经常会从一些文本文件中读取数据进行业务处理,最近遇到一个问题,另外一个部门提供一个txt文本给我们进行业务处理,当我们使用字符流读取文本之后,处理时,发现第一行数据无法匹配,其他数据可以正常处理 ...
- 【原创】Win7 IE故障：APPCRASH，d3d9.dll，c0000005
问题 今天使用使用IE登录某网址,发现总是报错,如下图,无法浏览. 解决方案 主要讲IE的呈现方案修改即可,如下步骤: 在IE的[Internet选项]选择[高级]选项卡,在[加速的图形]中勾选[使用 ...
- HDU 1698.Just a Hook-线段树(成段替换、输出总和tree[1])
HDU1698.Just a Hook 这个题是最最基础的成段更新的线段数的题目,直接贴代码吧. 代码: #include<iostream> #include<cstring> ...
- codevs 3961 硬币找零【完全背包DP/记忆化搜索】
题目描述 Description 在现实生活中,我们经常遇到硬币找零的问题,例如,在发工资时,财务人员就需要计算最少的找零硬币数,以便他们能从银行拿回最少的硬币数,并保证能用这些硬币发工资. 我们应该 ...
- 51nod 1182 完美字符串【字符串排序+哈希】
1182 完美字符串 题目来源: Facebook Hacker Cup选拔 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 约翰认为字符串的完美度等 ...