<!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. IDEA定位到类的代码区域（查看类的源码）

    经常需要查看某一个类中的成员变量和方法,那么怎么进入到这个类的源码区域呢?在IDEA中只需要使用快捷键: ctrl+shift+t 就可以快速定位到这个类的源码.

  2. 翻译：SET NAMES

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  3. MyBatis_查询缓存01

    一.查询缓存 查询缓存的使用,主要是为了提高查询访问速度.将用户对同一数据的重复查询过程简单化,不在每次均从数据库中查询获取结果数据,从而提高访问速度. MyBatis的查询缓存机制,根据缓存区的作用 ...

  4. 微信小程序——微信支付

    这个讲起来也就比较麻烦一点,因为需要的不仅仅是咱们代码上的技术,嘿嘿! 先整理一下思路.如果想做微信支付: 1.现有一个公司账户(非个人账户),并且实名认证过的. 2.微信号 必须开通微信支付功能. ...

  5. 《编程人生：15位软件先驱访谈录》【PDF】下载

    <编程人生:15位软件先驱访谈录>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382231 内容简介 本书适合所有程序员,也适合 ...

  6. 对Java中堆栈的解析

    Java把内存分为两种:一种是栈内存,一种是堆内存 栈内存:在函数中定义的一些基本类型的变量和对象的引用变量,当超过变量的作用域之后,Java自动释放该变量内存 堆内存:存放new创建的对象和数组,由 ...

  7. 批量下载google 字体小工具

    在项目开发中,我们经常用外国的框架,如bootstrap.nodejs.angularjs 时候经常要配套google 字体等资源, 但是由于国内网络原因,经常框架跑起来,网页在请求google 字体 ...

  8. 【java】用HashMap计数，用TreeSet排序

    package com.tn.hashMap; import java.util.HashMap; import java.util.TreeSet; public class HashMapDemo ...

  9. SharedPreferences 存List集合，模拟数据库，随时存取

    PS:SharedPreferences只要稍微学过一点就会用,他本身通过创建一个Editor对象,来存储提交,而editor可以存的格式为 他里面可以存一个Set<String> Set ...

  10. Linux并发连接上百万的配置

    To support over 500k users, you *need* - A bits hardware/kernel (AMD64, Opterons) - At least 8GB of ...