<!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. 此地址使用了一个通常用于网络浏览以外目的的端口。出于安全原因，Firefox 取消了该请求。

    火狐无法访问本机IIS部署的网站,弹出:此地址使用了一个通常用于网络浏览以外目的的端口.出于安全原因,Firefox 取消了该请求 的解决办法 关于火狐浏览器访问本机IIS部署的网站弹出"此 ...

  2. VR\AR 使用 SceneKit

    VR\AR 使用 SceneKit http://www.jianshu.com/c/70d63e3941fd

  3. nginx编译参数的内容

    最近公司安排我安装几台云服务器环境 采用nginx做反向代理: 查了一下官方文档,参数比较多,很多在上线后 可能才知道注意一下的. 编译安装nginx的话 需要安装一些前置组件: 1.gcc环境:用于 ...

  4. 【bird-java】bird-java概述

    bird-java是以dubbo为基础的分布式服务框架,专注于业务开发,提炼后台应用中的经典业务场景,大幅减少开发编码量. 技术选型 基础框架:spring 服务调度:dubbo web层:sprin ...

  5. touch监听判断手指的上滑，下滑，左滑，右滑，事件监听

    判断滑动的方向和距离,来实现一定的效果,比如返回上一页等等 <body> <script> $(function(){ //给body强制定义高度 var windowHeig ...

  6. Android破解学习之路（六）——Android游戏 方块冒险 破解

    前言: 可能大家看到标题会有些懵逼,以为我发错了,这应该是五才对吧,其实,五我已经发了,不过被管理大大移出首页了,不知道这一篇是不是也会是同样的命运.. 今天所写的是关于支付宝内购的破解 原版 链接: ...

  7. C# 使用 CancellationTokenSource 终止线程

    http://blog.csdn.net/hezheqiang/article/details/51966511 我们在多线程中通常使用一个 C# 使用 CancellationTokenSource ...

  8. 视频流GPU解码在ffempg的实现（一）-基本概念

    这段时间在实现Gpu的视频流解码,遇到了很多的问题. 得到了阿里视频处理专家蔡鼎老师以及英伟达开发季光老师的指导,在这里表示感谢! 基本命令(linux下) 1.查看物理显卡 lspci | grep ...

  9. 程序包管理rpm、yum与简单编译安装程序

    Linux程序包管理 Linux中软件的安装主要有两种形式:一种是直接下载源代码包自行编译后安装,另一种直接获取rpm软件包进行安装. 程序的组成部分: 二进制程序:程序的主体文件,比如我们运行一个l ...

  10. pagelatch等待在tempdb的gsm页面上

    Each data file has a gam page, sql will update it when allocate space in the file. Will see contenti ...