简单单页面路由跳转demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="result"></div>
</body>
</html>
<script type="text/javascript">
function Router() {
// 路由储存
this.routes = {};
// 当前路由
this.currentUrl = '';
}
Router.prototype = {
// 路由处理
route: function (path, callback) {
this.routes[path] = callback || function(){};
},
// 页面刷新
refresh: function () {
// 当前的hash值
this.currentUrl = location.hash.slice(1) || '/';
// 执行hash值改变后相对应的回调函数
this.routes[this.currentUrl]();
},
// 页面初始化
init: function () {
// 页面加载事件
window.addEventListener('load', this.refresh.bind(this), false);
// hash 值改变事件
window.addEventListener('hashchange', this.refresh.bind(this), false);
}
} // 全局挂载
window.Router = new Router();
// 初始化
window.Router.init(); let obj = document.querySelector('.result'); function changeConent (cnt) {
obj.innerHTML = cnt
} // 匹配路由做相应的操作
Router.route('/', function(){
changeConent("首页");
}) Router.route('/item', function(){
changeConent('item页面');
}) Router.route('/list', function(){
changeConent('list页面')
})
</script>
补充： 模拟mvvm的双向数据绑定
简单单页面路由跳转demo的更多相关文章
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- Form提交表单页面不跳转
1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 详解单页面路由的几种实现原理（附demo）
前言 路由是每个单页面网站必须要有的,所以,理解一下原理,我觉得还是比较重要的. 本篇,基本不会贴代码,只讲原理,代码在页底会有githup地址,主意,一定要放在服务本地服务器里跑(因为有ajax), ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- AngularJS单页面路由配置恩，理解了就很简单啦
利用route实现单页面跳转功能 利用angularJS开发流程 1)配置好angularJS开发环境 2)利用 yo angular projectname创建项目目录 3)删除掉系统自动生成的一些 ...
- 移动H5页面微信支付踩坑之旅（微信支付、单页面路由模拟、按钮加锁、轮询等常见功能）
开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...
- 利用hash或history实现单页面路由
目录 html代码 css代码 JavaScript代码 hash方式 history 方式 浏览器端代码 服务器端 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, h ...
- vue简单的v-for - - 路由跳转
前几天写了一个特特特简单的小图片页面,主要用到的就是v-for遍历以及路由跳转到详情页.路由跳转需要在router文件夹下index.js引入. 导航栏(element ui导航栏为模板): < ...
- 页面路由跳转地址-get方式
从开始敲代码,一直到现在,总是记不太清页面上的路由应该怎样书写,因此最终还是觉得自己应该提笔写下来以免自己再犯同样的错误! 1.get方式访问页面 http://localhost:3001/arti ...
随机推荐
- Java集合源代码剖析（二）【HashMap、Hashtable】
HashMap源代码剖析 ; // 最大容量(必须是2的幂且小于2的30次方.传入容量过大将被这个值替换) static final int MAXIMUM_CAPACITY = 1 << ...
- ASP.NET Core WebApi 返回统一格式参数（Json 中 Null 替换为空字符串）
相关博文:ASP.NET Core WebApi 返回统一格式参数 业务场景: 统一返回格式参数中,如果包含 Null 值,调用方会不太好处理,需要替换为空字符串,示例: { "respon ...
- 从源码角度简单看StringBuilder和StringBuffer的异同
概述 StringBuilder和StringBuffer是两个容易混淆的概念,本文从源码入手,简单看二者的异同. 容易知道的是,这两者有一个是线程安全的,而且线程安全的那个效率低. java doc ...
- 小白的Python之路 PEP8 代码风格
转载自http://www.douban.com/note/134971609/ Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下 ...
- 虚拟表dual。字符串函数UPPER,LOWER。&变量。INITCAP，LENGTH，SUBSTR
&自定义变量的用法:
- 【java】TreeSet、Comparable、Comparator、内部类、匿名类
package com.tn.treeSet; public class Student { private String name; private int age; public Student( ...
- H5之前端操作文件
js是否能够操作文件? js在HTML5以前浏览器端是无法操作文件的,但HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载( ...
- 如何给动态添加的form表单控件添加表单验证
最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...
- redis hash结构 遍历某一个key下所有的(field,values)的方法
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/95 redis的hash结构中存储了如下的数据: $input ...
- canvas学习api
1.canvas.getContext():获取渲染上下文和绘画功能: 一.绘制矩形 2.ctx.fillRect(x,y,width,height):绘制矩形: 3.ctx.strokeRect(x ...