<!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. vue-购物车

    最终的实现效果: 需求分析: 购物车需要展示一个已加入购物车的商品列表,包含商品名称,商品单价,购买数量和操作等信息,还需要实时显示购买的总价.其中购买数量可以增加或减少,每类商品还可以从购物车中移除 ...

  2. Java数组的一些使用方法及堆栈存储

    数组 用于存储一组同一数据类型数据的容器 数组会对放入其中的数据自动编号,编号是从0开始的---下标 定义格式 数据类型[] 数组名 = new 数据类型[数组的大小];---可以先声明再初始化 in ...

  3. 《算法 (第4版)》【PDF】下载

    <算法 (第4版)>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196349 (第4版)>[PDF]"  TITL ...

  4. JDBC中rs.beforeFirst()

    写在前面: 最近的项目比较老,用到了jdbc查询数据,展示数据.有时候一个查询语句的ResultSet需要用到好几次,即需要遍历好几次同一个查询结果集,那要怎么办呢? 使用如下方式即可解决 其实这里理 ...

  5. 【JS】数据类型

    其他类型转化为boolean类型规则: number:非0为true,0和NaN为false: String:非空为true,空为false: Object:任何对象都为true 任何变量赋值为nul ...

  6. [转]winform 自动伸缩控件xpandercontrols 使用说明

    链接地址:http://blog.sina.com.cn/s/blog_b5b004920101f5h3.html

  7. AntData.ORM框架 之 读写分离

    环境准备 准备2台机器配置好Master Slaver模式 我是用vmware 2台虚拟机配置的.有需要请联系. Master:192.168.11.130 Slaver:192.168.11.133 ...

  8. Ubuntu Nginx 开机自启动

    #! /bin/sh # chkconfig: 2345 55 25 # Description: Startup script for nginx webserver on Debian. Plac ...

  9. 【http转https】其之一：腾讯云 DV SSL证书申请实验

    文:铁乐猫 2016年1月 前言 大概2017年12月28日左右公司提出以后需要将公司网站由http提升到https级别,以便谷歌和火狐浏览器将之认定为安全网站. 主要是出于客户.用户那边用火狐或谷歌 ...

  10. Spring_Aop的xml和注解的使用

    动态代理:    目的:在不改变源代码的情况下,对方法进行增强!        动态代理又分为两种:    1.第一个就是基于接口的动态代理,他是由jdk提供的    2.基于子类的动态代理:cgli ...