<!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的双向数据绑定

http://hcysun.me/2016/04/28/JavaScript%E5%AE%9E%E7%8E%B0MVVM%E4%B9%8B%E6%88%91%E5%B0%B1%E6%98%AF%E6%83%B3%E7%9B%91%E6%B5%8B%E4%B8%80%E4%B8%AA%E6%99%AE%E9%80%9A%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%8F%98%E5%8C%96/  

简单单页面路由跳转demo的更多相关文章

  1. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  2. Form提交表单页面不跳转

    1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. 详解单页面路由的几种实现原理(附demo)

    前言 路由是每个单页面网站必须要有的,所以,理解一下原理,我觉得还是比较重要的. 本篇,基本不会贴代码,只讲原理,代码在页底会有githup地址,主意,一定要放在服务本地服务器里跑(因为有ajax), ...

  4. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  5. AngularJS单页面路由配置恩,理解了就很简单啦

    利用route实现单页面跳转功能 利用angularJS开发流程 1)配置好angularJS开发环境 2)利用 yo angular projectname创建项目目录 3)删除掉系统自动生成的一些 ...

  6. 移动H5页面微信支付踩坑之旅(微信支付、单页面路由模拟、按钮加锁、轮询等常见功能)

    开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...

  7. 利用hash或history实现单页面路由

    目录 html代码 css代码 JavaScript代码 hash方式 history 方式 浏览器端代码 服务器端 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, h ...

  8. vue简单的v-for - - 路由跳转

    前几天写了一个特特特简单的小图片页面,主要用到的就是v-for遍历以及路由跳转到详情页.路由跳转需要在router文件夹下index.js引入. 导航栏(element ui导航栏为模板): < ...

  9. 页面路由跳转地址-get方式

    从开始敲代码,一直到现在,总是记不太清页面上的路由应该怎样书写,因此最终还是觉得自己应该提笔写下来以免自己再犯同样的错误! 1.get方式访问页面 http://localhost:3001/arti ...

随机推荐

  1. Java集合源代码剖析(二)【HashMap、Hashtable】

    HashMap源代码剖析 ; // 最大容量(必须是2的幂且小于2的30次方.传入容量过大将被这个值替换) static final int MAXIMUM_CAPACITY = 1 << ...

  2. ASP.NET Core WebApi 返回统一格式参数(Json 中 Null 替换为空字符串)

    相关博文:ASP.NET Core WebApi 返回统一格式参数 业务场景: 统一返回格式参数中,如果包含 Null 值,调用方会不太好处理,需要替换为空字符串,示例: { "respon ...

  3. 从源码角度简单看StringBuilder和StringBuffer的异同

    概述 StringBuilder和StringBuffer是两个容易混淆的概念,本文从源码入手,简单看二者的异同. 容易知道的是,这两者有一个是线程安全的,而且线程安全的那个效率低. java doc ...

  4. 小白的Python之路 PEP8 代码风格

    转载自http://www.douban.com/note/134971609/ Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下 ...

  5. 虚拟表dual。字符串函数UPPER,LOWER。&变量。INITCAP,LENGTH,SUBSTR

    &自定义变量的用法:

  6. 【java】TreeSet、Comparable、Comparator、内部类、匿名类

    package com.tn.treeSet; public class Student { private String name; private int age; public Student( ...

  7. H5之前端操作文件

    js是否能够操作文件? js在HTML5以前浏览器端是无法操作文件的,但HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载( ...

  8. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

  9. redis hash结构 遍历某一个key下所有的(field,values)的方法

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/95 redis的hash结构中存储了如下的数据: $input ...

  10. canvas学习api

    1.canvas.getContext():获取渲染上下文和绘画功能: 一.绘制矩形 2.ctx.fillRect(x,y,width,height):绘制矩形: 3.ctx.strokeRect(x ...