vue-router的简单实现原理
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head> <body>
<a href="#/a">aaa</a>
<a href="#/b">bbb</a>
<a href="#/c">ccc</a>
<div id="box"> </div>
<script>
let routes = [{
path: '/a',
component: './tem/a.html',
childre:[
{
path:"b",
component:'./img/off.png'
}
]
},
{
path: '/b',
component: './tem/b.html'
},
{
path: '/c',
component: './tem/c.html'
},
]
let cache = {};
// 建立缓存
addEventListener('hashchange', () => {
let hash = location.hash.replace('#', '')
// 拿到hash值
let flag = routes.some((item) => {
if (item.path === hash) {
if (cache[hash]) {
$('#box').html(cache[hash]);
} else {
$.ajax(item.component).then((res) => {
cache[hash] = res;
$('#box').html(res);
})
}
return true;
}
return false;
})
if(!flag){
$('body').html('404')
}
}) </script>
</body> </html>
vue-router的简单实现原理的更多相关文章
- Vue Router的简单了解
Vue Router Vue Router官方文档 传统Web项目开发往往采用超链接实现页面之间的切换和跳转.Vue开发的是单页面应用(Single Page Application,SPA),不能使 ...
- 「进阶篇」Vue Router 核心原理解析
前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- vue我的总结+转原理
我的总结 vue:1 mvvm模型,model,view,viewmodel,自底层向上,逐渐增加的模式2 .vue文件 包含html css js 有最近设计原则,将自己需要的放到最近,2 组件化 ...
- [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- vuex中mapGetters的使用及简单实现原理
一.项目中的mapGetters在Vue项目的开发过程中必然会使用到vuex,对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,如果不使用vuex,那么一些非父子组件之间的数据通信将会 ...
- 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
- vue路由的简单实例
vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...
- vue实现双向数据绑定的原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...
随机推荐
- pip命令安装 pyinstaller失败解决办法
写在前面,如果是用win10系统的用户,一定要先通过管理员模式打开命令窗口,我是直接按 win + x 键,选择 "Windows Powershell(管理员)",否则会提示: ...
- node 打开浏览器
npm install --save opn const opn = require('opn'); // 使用默认浏览器打开 // opn('http://sindresorhus.com'); / ...
- 前端数据库——WebSQL和IndexedDB
一.WebSQL WebSQL是前端的一个独立模块,是web存储方式的一种,我们调试的时候会经常看到,只是一般很少使用.并且,当前只有谷歌支持,ie和火狐均不支持. 我们对数据库的一般概念是后端才会跟 ...
- P1140 相似基因 这个和之前有一个题目特别像 dp
题目背景 大家都知道,基因可以看作一个碱基对序列.它包含了444种核苷酸,简记作A,C,G,TA,C,G,TA,C,G,T.生物学家正致力于寻找人类基因的功能,以利用于诊断疾病和发明药物. 在一个人类 ...
- UVA11694-Gokigen Naname（DFS进阶）
Problem UVA11694-Gokigen Naname Accept: 76 Submit: 586Time Limit: 10000 mSec Problem Description I ...
- 第9章 Java中的线程池 第10章 Exector框架
与新建线程池相比线程池的优点 线程池的分类 ThreadPoolExector参数.执行过程.存储方式 阻塞队列 拒绝策略 10.1 Exector框架简介 10.1.1 Executor框架的两级调 ...
- 吴恩达课后作业学习1-week4-homework-multi-hidden-layer -2
参考:https://blog.csdn.net/u013733326/article/details/79767169 希望大家直接到上面的网址去查看代码,下面是本人的笔记 实现多层神经网络 1.准 ...
- win7 64位操作系统 电脑桌面出现this computer is being attacked的窗口
本人为win7 64位操作系统,戴尔笔记本电脑. 昨天在教室写程序来着,突然桌面上出现this computer is being attacked的窗口,如下所示.每隔半分钟左右出现在电脑桌面上转两 ...
- face detection[DSFD]
本文来自<DSFD: Dual Shot Face Detector>,时间线为2018年10月,是南理工Jian Li在腾讯优图实验室实习时候的作品.在WIDER FACE,FDDB上效 ...
- 1、话说linux内核
1.内核和发行版的区别 到底什么是操作系统 linux.windows.android.ucos就是操作系统 操作系统本质上是一个程序,由很多个源文件构成,需要编译连接成操作系统程序(vmlinz.z ...