<!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. 对使用多个swiper下标有时显示不出来的问题

    这久写了一个网页,其中有很多的轮播图及tab页面切换,就使用了swiper框架,有时一个网页要用到6-8个,如此就出现了下图这种问题: 有时刷新看不到,有时又能看到,tab切换过去的页面也看不到,其实 ...

  2. Java中File的使用

    File 代表文件或者目录的类 构造函数 File(File parent,String child)---代表了指定父目录下的指定的子文件或者子目录 File(String pathname)--- ...

  3. 获取spring容器上下文（webApplicationContext）的几种方法

    在很多情况,我们需要先获取spring容器上下文,即webApplicationContext,然后通过webApplicationContext来获取其中的bean.典型的情况是,我想在一个并未委托 ...

  4. cs231n --- 3 : Convolutional Neural Networks (CNNs / ConvNets)

    CNN介绍 与之前的神经网络不同之处在于,CNN明确指定了输入就是图像,这允许我们将某些特征编码到CNN的结构中去,不仅易于实现,还能极大减少网络的参数. 一. 结构概述 与一般的神经网络不同,卷积神 ...

  5. centos6.5 yum update 报错Couldn't resolve host 'centos.ustc.edu.cn'

    异常信息 [root@localhost ~]# yum -y update Loaded plugins: fastestmirror, refresh-packagekit, security S ...

  6. 为什么还坚持.NET？ 找一门适合自己的语言去做编程

    为什么还坚持.NET? 找一门适合自己的语言去做编程 接触了.NET快十二年了,现在专注于分布式服务的开发. 中间经历过各种编程语言的诱惑,ios等. 前几年才对自己有比较明确的定位 技术上:找到适合 ...

  7. 《程序设计语言——实践之路》【PDF】下载

    程序设计语言--实践之路>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382240 内容简介 本书在美国大学已有使用了十余年,目前被欧 ...

  8. 《代码大全(第二版)》【PDF】下载

    <代码大全(第二版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382264 内容简介 <代码大全(第2版)>是著 ...

  9. Jmeter接口测试使用beanshell断言json返回

    一般情况下响应断言就能解决很多问题,但是返回复杂的json时就需要用到beanshell断言. 举个例子 免费的接口API www.sojson.com/api/beian/sojson.com ho ...

  10. MySQL必知必会笔记

    数据库和表的增删改 创建数据库 CREATE DATABASE 数据库名; # mysql中还可使用如下语句 CREATE SCHEMA 数据库名; 数据库选择 USE 数据库名; 创建表 creat ...