简单单页面路由跳转demo
<!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的双向数据绑定
简单单页面路由跳转demo的更多相关文章
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- Form提交表单页面不跳转
1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 详解单页面路由的几种实现原理（附demo）
前言 路由是每个单页面网站必须要有的,所以,理解一下原理,我觉得还是比较重要的. 本篇,基本不会贴代码,只讲原理,代码在页底会有githup地址,主意,一定要放在服务本地服务器里跑(因为有ajax), ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- AngularJS单页面路由配置恩，理解了就很简单啦
利用route实现单页面跳转功能 利用angularJS开发流程 1)配置好angularJS开发环境 2)利用 yo angular projectname创建项目目录 3)删除掉系统自动生成的一些 ...
- 移动H5页面微信支付踩坑之旅（微信支付、单页面路由模拟、按钮加锁、轮询等常见功能）
开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...
- 利用hash或history实现单页面路由
目录 html代码 css代码 JavaScript代码 hash方式 history 方式 浏览器端代码 服务器端 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, h ...
- vue简单的v-for - - 路由跳转
前几天写了一个特特特简单的小图片页面,主要用到的就是v-for遍历以及路由跳转到详情页.路由跳转需要在router文件夹下index.js引入. 导航栏(element ui导航栏为模板): < ...
- 页面路由跳转地址-get方式
从开始敲代码,一直到现在,总是记不太清页面上的路由应该怎样书写,因此最终还是觉得自己应该提笔写下来以免自己再犯同样的错误! 1.get方式访问页面 http://localhost:3001/arti ...
随机推荐
- js中常见的一些兼容性问题
1)滚动条: document.documentElement.scrollTop||document.body.scrollTop 2) 网页可视区域兼容 window.innerHeight || ...
- Lua的数学函数
ua5.1中数学库的所有函数如下表: math.pi 为圆周率常量 = 3.14159265358979323846 函数名 函数功能 示例 示例结果 abs 取绝对值 math.abs(-15) ...
- Targets选项下Other linker flags的设置
-ObjC:加了这个参数后,链接器就会把静态库中所有的Objective-C类和分类都加载到最后的可执行文件中 -all_load:会让链接器把所有找到的目标文件都加载到可执行文件中,但是千万不要随便 ...
- linux部署服务器遇到tomcat already start
linux部署服务器遇到tomcat already start 前言,之前做了个汽车停车计费的后端,然后现在需要部署到服务器.正常部署,使用secureFx找到所属webapps目录,将文件上传.然 ...
- 1. 生成三行文本，过滤文本，cp不覆盖，find查找文件，sed打印行，查看系统信息，磁盘分区
- C#中的GET和SET访问器
我们在学习C#语法的属性时,都要首先和GET,SET访问器打交道,从英文的字面意思上理解,GET应该就是获得什么什么,而SET应该是设置什么什么,那我们看一下,官方是怎么定义这对访问器的:get是读取 ...
- 【java】控制台实现贪吃蛇小游戏-LinkedList、Scanner
package com.myproj.snake; public class Node { private int i,j; public Node(){} public Node(int i, in ...
- 通过SQL创建一个有主键自动递增有默认值不为空有注释的表
-- create database db_std_mgr_sys; use db_std_mgr_sys; create table student( std_id bigint not null ...
- Thinkphp开启调试模式
3.0版本的调试模式开启,必须在项目入口文件中添加常量APP_DEBUG定义,如下: define('APP_DEBUG',True); // 开启调试模式 开启调试模式后,你可能感觉不到什么变化,不 ...
- 在Windows上运行Linux
在Windows上运行Linux 之前了解过一些适用于linux的Windows子系统,最近又听人提起,于是在自己的Windows 10专业版上安装了一个Ubuntu.运行起来还真方便,以后在wind ...