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 ...
随机推荐
- Angular之模态弹窗ui-bootstrap-modal及轻量级弹窗ngDialog
ui-bootstrap 中模态 官网 angular-ui-bootstrap 对于ui-bootstrap集成大量指令如折叠ui.bootstrap.accordion.时间插件ui.boot ...
- 05.Python网络爬虫之三种数据解析方式
引入 回顾requests实现数据爬取的流程 指定url 基于requests模块发起请求 获取响应对象中的数据 进行持久化存储 其实,在上述流程中还需要较为重要的一步,就是在持久化存储之前需要进行指 ...
- 【English】20190308
hiring雇佣['haɪərɪŋ] across跨越 field sales区域销售[fild] [seɪlz] The Google Cloud team is growing and w ...
- ubuntu如何安装 adobe flash player或adobe插件
方法/步骤 第一步当然是打开终端控制器.有很多方法,这里推荐使用快捷键:ctrl+alt+T.快捷又方便. 然后更新源列表,使用如下命令:sudo apt-get update,后面要输入密码. 下面 ...
- eshint的配置
{ "strict" : "implied", //文件里面使用"use strict" "undef" : true, ...
- css滚动条样式自定义
很简单的几行代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- ccf 再买菜 搜索 dfs
//递推关系式:(b[n-1]+b[n]+b[n+1])/3=a[n] //所以b[n+1]=3*a[n]-b[n-1]-b[n],或b[n+1]=3*a[n]-b[n-1]-b[n]+1,或b[n+ ...
- MySQL高级知识（三）——索引
前言:索引在sql调优部分占据着重要的位置,了解并深入索引对我们来说也是非常重要的.本篇主要介绍MySQL中索引的相关知识点. 1.索引是什么 MySQL官方对索引的定义:索引(Index)是帮助My ...
- 数据库索引 引用树形结构 B-数 B+数
MySQL 为什么使用B+数 B-树和B+树最重要的一个区别就是B+树只有叶节点存放数据,其余节点用来索引,而B-树是每个索引节点都会有Data域. 这就决定了B+树更适合用来存储外部数据,也就是所谓 ...
- Python实现矿池
自建P2POOL矿池详细教程(高级篇)http://8btc.com/article-1804-1.html p2pool比特币矿池教程综合篇(包含linux矿池教程)https://www.cybt ...