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路由跳转的简单实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • AngularJS路由实现页面跳转实例

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo

  • AngularJS实现单一页面内设置跳转路由的方法

    本文实例讲述了AngularJS实现单一页面内设置跳转路由的方法.分享给大家供大家参考,具体如下: 单一页面内设置跳转路由 鉴于现在很多应用的应用功能以及场景都非常简单,如果还按照以前的思路,每个页面做一个html,通过路由进行跳转,不仅在时间上会有延迟,在某些特殊的浏览器(最典型的如微信内置浏览器)中,跳转过程中会出现短暂的白页. 因此,我们在开发过程中,将页面逻辑封装到同一个html中.当系统第一次加载页面时,将所有页面全部加载进去,然后通过angularJS内置的路由进行加载. 直接上代码

  • react-router JS 控制路由跳转实例

    Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.handleSubmit}> <input type="text" placeholder="userName"/> <input type="text" placeholder="repo"/> <

  • 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多简单无缝滚动代码(包含图文效果)

    本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. 接着滚动开始,当滚动条到达元素的中间位置时: 不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现"跳跃".稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2

  • require.js与bootstrap结合实现简单的页面登录和页面跳转功能

    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.js.vue-router.js),放到对应路径. 1.引入依赖库 <script src="vue.js" type="text/javascript" charset="GBK"></script> <script src="vue-

  • JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例

    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/

随机推荐