JS路由跳转的简单实现代码
这是一个简单的路由跳转,希望对你有所帮助
下面的连接中有复杂的路由跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="angular1.4.6.min.js"></script> <script src="angular-route.js"></script> </head> <body ng-app="MyApp" > <a href="#/" rel="external nofollow" >CHINA</a><br/> <a href="#/1" rel="external nofollow" >CHINA1</a><br/> <a href="#/2" rel="external nofollow" >CHINA2</a><br/> <a href="#/3" rel="external nofollow" >CHINA3</a><br/> <div ng-view> 11111 </div> <script> var app = angular.module("MyApp", ["ngRoute"]); app.config(function ( $routeProvider) { $routeProvider .when("/", {template: "<h1>123</h1>"}) .when("/1", {template: "<h1>111</h1>"}) .when("/2", {template: "<h1>222</h1>"}) .when("/3", {template: "<h1>333</h1>"}); }); </script> </body> </html>
总结
以上所述是小编给大家介绍的JS路由跳转的简单实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
react-router JS 控制路由跳转实例
Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.handleSubmit}> <input type="text" placeholder="userName"/> <input type="text" placeholder="repo"/> <
-
AngularJS实现单一页面内设置跳转路由的方法
本文实例讲述了AngularJS实现单一页面内设置跳转路由的方法.分享给大家供大家参考,具体如下: 单一页面内设置跳转路由 鉴于现在很多应用的应用功能以及场景都非常简单,如果还按照以前的思路,每个页面做一个html,通过路由进行跳转,不仅在时间上会有延迟,在某些特殊的浏览器(最典型的如微信内置浏览器)中,跳转过程中会出现短暂的白页. 因此,我们在开发过程中,将页面逻辑封装到同一个html中.当系统第一次加载页面时,将所有页面全部加载进去,然后通过angularJS内置的路由进行加载. 直接上代码
-
AngularJS路由实现页面跳转实例
AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo
-
VueJs路由跳转——vue-router的使用详解
对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> p
-
JS路由跳转的简单实现代码
这是一个简单的路由跳转,希望对你有所帮助 下面的连接中有复杂的路由跳转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="angular1.4.6.min.js"></script> <script sr
-
vue.js路由跳转详解
本文为大家分享了vue.js路由的跳转,供大家参考,具体内容如下 1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <rout
-
JS Map 和 List 的简单实现代码
复制代码 代码如下: /* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素(key, value) * remove(key) 删除指定KEY的元素,成功返回True,失败返回False * get(key) 获取指定KEY的元素值VALUE,失败返回NULL * element(
-
js禁止页面使用右键(简单示例代码)
js禁止右键的代码: 复制代码 代码如下: function click(e) {if (document.all) {if (event.button==1||event.button==2||event.button==3) {oncontextmenu='return false';}}if (document.layers) {if (e.which == 3) {oncontextmenu='return false';}}}if (document.layers) {document
-
js判断ie版本号的简单实现代码
jQuery 2.0 去除了对浏览器版本号的判断(它推荐特性检测),这里是一个老外写的原生判断方法,这段代码着实巧妙!既简介.有向后兼容!一般做法都是:正则搜索 USER_AGENT :但因为历史原因, USER_AGENT 一直都不准确,而且被各大厂商改的乱七八糟.:比如: IE10 : Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0) IE11 : Mozilla/5.0 (Windows NT 6
-
js二维数组排序的简单示例代码
如下所示: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" cont
-
JS实现的N多简单无缝滚动代码(包含图文效果)
本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. 接着滚动开始,当滚动条到达元素的中间位置时: 不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现"跳跃".稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2
-
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
小颖的这个demo其实很简单的,大家一起来先来看看页面效果图: 目录: 代码: inde.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>require.j
-
Vue.js路由实现选项卡简单实例
本文实例为大家分享了Vue.js路由实现选项卡的具体代码,供大家参考,具体内容如下 需要实现下图效果,点击上方选项卡,切换到不同内容的组件: 事先准备好两个库文件(vue.js.vue-router.js),放到对应路径. 1.引入依赖库 <script src="vue.js" type="text/javascript" charset="GBK"></script> <script src="vue-
-
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
本文实例讲述了JS实现的定时器展示简单秒表.页面弹框及跳转操作.分享给大家供大家参考,具体如下: 定时器展示简单秒表demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
随机推荐
- 详解MySql的慢查询分析及开启慢查询日志
- require.js深入了解 require.js特性介绍
- 详解Java判断是否是整数,小数或实数的正则表达式
- BAT批处理中的字符串处理详解(字符串截取)
- 零基础写python爬虫之爬虫的定义及URL构成
- vmware安装CentOS 7的详细教程
- 摘自启点的main.js
- 深入分析C#中处理和键盘相关事件的详解
- 一个实用的php验证码类
- docker上安装使用mysql镜像
- asp.net+Ajax 文本文件静态分页实现代码
- flash幻灯片需要先激活ActiveX控件才能使用的又一个办法
- SSH框架网上商城项目第30战之项目总结(附源码下载地址)
- js实现数组去重、判断数组以及对象中的内容是否相同
- SQL语句执行顺序图文介绍
- 网页背景渐变效果代码
- 微信随机生成红包金额算法java版
- JAVA设计模式之备忘录模式原理与用法详解
- C#简单的向量用法实例教程
- 用javascript实现源代码的隐藏与解密的方法