跳转外链,Router路由的选用和页面跳转

By admin in 4858美高梅 on 2019年4月3日

react中贯彻在js中在这之中跳转路由,有三种艺术。

React-Router的华语文书档案能够参见如下链接:

微信小程序 页面跳转和数目传递

AngulagJs的页面使用Route跳转

方法一:

1.先导

一.除了引用AngularJs.js外,还要引用路由JS,
“~/Scripts/angularjs/angular-route.js”

import PropTypes from 'prop-types';
export default class Header extends Component {
    static contextTypes = {
        router: PropTypes.object.isRequired,
    }
    constructor(props) {
        super(props);
        this.state = {
            keyword:"",
            channelList:[]
        };
        this.handleToSearch=this.handleToSearch.bind(this);
    }
    handleToSearch() {
        if(this.state.keyword){
            this.context.router.history.push(`/news_list/search/${this.props.channelId}/${this.state.keyword}`)
        }
    }
    render() {
        return (
               <div className="wrapper">
                  小星星小星星
               </div>
        );
    }
}

率先,我们打开已经创设完毕的React项目目录,本身使用的是VScode编辑器

跳转外链,Router路由的选用和页面跳转。在Android中,大家Activity和Fragment都有栈的概念在内部,微信小程序页面也有栈的定义在中间。微信小程序页面跳转有三种艺术:

二.通过$routeProvider定义路由,示例

4858美高梅,方法二:

咱俩删去src目录下的持有文件,创立index.js文件,内容如下:

1.wx.navigateTo(OBJECT);
2.wx.redirectTo(OBJECT);
3.wx.switchTab(OBJECT);
4.wx.navigateBack(OBJECT)
五.施用达成对应的跳转效能;

var testModule = angular.module('testModule', ['ngRoute']);

testModule.config(['$routeProvider', function ($routeProvider) {
 $routeProvider.when('/2', {//'/2'定义的路由路径,以后通过此路径访问,通常定义为短路径
  templateUrl: "/home/index2",//"/home/index2"是路由实际访问的路径,可以是asp.net mvc的访问路径(如此例),也可是具体的页面路径,如“test/test.html"
  controller:'testController'//路由跳转的controller,后面必须定义此控制器
 });

 $routeProvider.when('/3', {
  templateUrl: "/home/index3",
  controller:'testController'
 })

}]);
this.props.history.push('/download')
import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App/>, document.getElementById;

分析:

3.选择路由跳转,结合ng-view做spa

跳转到外链:

下一场成立App.js文件,内容如下:

  1. 中间navigateTo是将原先的页面保存在页面栈中,在跳入到下五个页面包车型大巴时候指标页面也进栈,唯有在这几个情状下点击手提式无线电话机的回到按钮才足以跳转到上贰个页面;
  2. redirectTo和switchTab都以先化解栈中原来的页面,然后指标页面进栈,使用那三种跳转格局,都不能够因此系统的再次回到键回到上2个页面,而是径直退出小程序;
  3. redirectTo使用的时候势须求合营tabBar或是页面里面能够另行跳转按钮,不然无法回到上一个页面;
  4. switchTab跳转的页面必须是tabBar中注脚的页面;
  5. tabBar中定义的字段无法当先四个页面,小程序的页面栈层次也不能够抢先伍层。
  6. navigateBack只好回去到页面栈中的内定页面,1般和navigateTo合营使用。
  7. wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只可以用
    wx.switchTab 跳转到 tabbar 页面

3.1  在JS中使用$location举办跳转,如示例,在急需的时候调用goToIndex2即可

window.location.href = 'https://你的url'
import React from 'react';import { BrowserRouter as Router,Route} from 'react-router-dom';import Home from './Home';import Page1 from './Page1';import Page2 from './Page2';import Page3 from './Page3';class App extends React.Component {render(){return(<Router > <div><Route path="/" component={Home} /><Route path="/Page1" component={Page1} /><Route path="/Page2" component={Page2} /><Route path="/Page3" component={Page3} /></div></Router>)}}export default App;

②.页面跳转的具体操作

testModule.controller("testController", ["$scope", "$location", function ($scope, $location) {

 $scope.goToIndex2 = function () {
  $location.path("/2")
 }
}]);

 

在上方的import中,载入了 BrowserRouter as Router 和
Route,其意思就是从react-router-dom包中程导弹入Router和Route,BrowserRouter是Router中的一种。

(1)wx.navigateTo(OBJECT)

三.贰 在html代码中运用href=”#path”来拓展跳转

在页面中给二个按钮绑定绑定跳转,借使跳转到项目标路由,引入react-router的Link

接下来,上面依次引入了Home、Page一、Page二、Page3那五个零件,组件的始末之后会付给。

保存当前页面,跳转到应用内的有些页面,使用wx.navigateBack能够回到到原页面。

<html >
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index1</title>
 @Styles.Render("~/Content/css/base")
 @Scripts.Render("~/script/base")
 <script src="~/scripts/ngmoudle/app.js"></script>
</head>
<body>
 <div ng-app="testModule" ng-controller="testController">
  <header>
   <h1>This is Index1</h1>
   <button type="button" class="btn btn-default" ng-click="goToIndex2()">Index2</button>
   <a href="#/3" class="btn btn-default">Index3</a><!--通过heft="#path"方式进行跳转-->
   <a href="#/2" class="btn btn-default" >Index2</a>
    </header>
  <div ng-view>

  </div>
  <footer>PAGE FOOTER</footer>
 </div>
</body>
</html>

选取<Link to=”/download”>下载</Link>
格局跳转,假使指望页面从新页面打开,加 

在组件的render函数的return里面,大家能够见见一对<Router>标签包括了八个<Route>标签,每种<Route>标签中都含有了path属性和component属性,path
属性用于储存路径,正是网址主页路径前边的内容,倘使网址地址是localhost:三千,那么,locahost:三千后头的字符串就是path属性的始末。(注意,Router只好有2个子零件,所以要把装有Route标签用三个div包裹起来)

参数 类型 必填 说明
url String 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2′
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

 4.有关Angularjs版本不得不说的题材(追加部分),“/”变”%2F”难点

 target="_blank"

然后是 component
属性,在那之中存款和储蓄了组件名称,当大家走访特定地点时就会渲染该器件,也得以称其为那多个路由的入口组件,能够由这几个组件延伸开来搭建页面。

示范代码:

新的类别一贯使用Nuget获取Angularjs后,发现比照上述的写法,不能够跳转了,表现症状为
<a href=”#/2″>Index2</a>
点击之后,发现浏览器地址变为“#%2贰”,“/”变”%贰F”导致路由不能够跳转了,一顿猛查和调节,才发觉AngularJs自一.陆本子后对地点做了尤其处理
知道原委后,化解难题也很简短,在Angular中注解用回旧有法子即可。

倘若跳转到一个外链,使用a标签,即使希望页面从新页面打开,除了加target,

Home组件的剧情如下:

wx.navigateTo({
 url: 'test?id=1'//实际路径要写全
})


//test.js
Page({
 onLoad: function(option){
 console.log(option.query) 
 }
})

可参见

 target="_blank"
import React from 'react';class Home extends React.Component{render(){return(<div><div>This is Home!</div></div>);}}export default Home;

注意:为了不让用户在应用小程序时造成干扰,大家规定页面路径只可以是五层,请尽量防止多层级的交互格局。

testModule.config(['$locationProvider', function($locationProvider) {
 $locationProvider.hashPrefix('');
}]);

testModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]);

还要加三个rel:

用以体现div标签中的This is Home!语句。

(2)wx.redirectTo(OBJECT)

以上就是本文的全体内容,希望对大家的就学抱有帮忙,也期待大家多多扶助脚本之家。

<a href="https://internal.zhongwentoutiao.com/admin/news_list" target="_blank" rel="noopener noreferrer">管理员入口</a>

Page一-Page3零部件类似,内容为:

闭馆当前页面,跳转到应用内的某部页面。

您也许感兴趣的稿子:

  • AngularJS利用Controller完成URL跳转
  • AngularJS路由达成页面跳转实例
  • angularjs项指标页面跳转怎么着落实(多种格局)
  • Angular 页面跳转时传参难题
  • Angular中$state.go页面跳转并传递参数的不二等秘书籍
  • angular4如何在全局设置路由跳转动画的方法
  • AngularJS实现单壹页面内设置跳转路由的点子
  • AngularJS页面带参跳转及参数解析操作示例
  • AngularJS完结页面跳转后活动弹出对话框实例代码
  • AngularJS完结的锚点楼层跳转成效示例

 

import React from 'react';class Page1 extends React.Component{render(){return(<div><div>This is Page1!</div></div>);}}export default Page1;
参数 类型 必填 说明
url String 需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2′
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

然后大家就足以来尝试一下拜访那一个页面,比如,大家在浏览器地址栏中输入localhost:两千/

示范代码:

能够看看:

wx.redirectTo({
 url: 'test?id=1'
})

4858美高梅 1

(3)wx.switchTab(OBJECT)

当大家走访 localhost:3000/Page一 的时候就会看到

跳转到 tabBar 页面,并关闭别的具有非 tabBar 页面

4858美高梅 2

OBJECT 参数表达:

那边会产生2个问号,为啥我们访问 /Page1路径的时候会渲染Home组件的始末。

参数 类型 必填 说明
url String 需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

那是因为Home组件所在路由的 path为 “/”,而“/Page壹”开始包括了
“/”,React就会私下认可渲染Home组件。

示范代码:

借使想在造访其余地方时不显示Home组件,能够在Home组件所在Route标签中进入
exact ,如下:

{
 "tabBar": {
 "list": [{
  "pagePath": "index",
  "text": "首页"
 },{
  "pagePath": "other",
  "text": "其他"
 }]
 }
}


wx.switchTab({
 url: '/index'
})
<div><Route exact path="/" component={Home} /><Route path="/Page1" component={Page1} />

(4)wx.navigateBack(OBJECT)

这样一来,当大家走访 localhost:三千/Page一 时就不会私下认可渲染Home组件。

闭馆当前页面,再次回到上一页面或系列页面。可透过 getCurrentPages())
获取当前的页面栈,决定须要回到几层。

关于Page2、Page三的造访也是相同,现在得了,我们得以经过输入地点的秘诀展开访问,但还是不够方便,那么大家即将设置某些拜访入口,也正是价值观页面中“超链接”所在地。

OBJECT 参数表明:

我们在Home组件中做如下改变:

参数 类型 必填 说明
delta Number 1 返回的页面数,如果 delta 大于现有页面数,则返回到首页。
import React from 'react';import { Link } from 'react-router-dom';class Home extends React.Component{render(){return(<div><div>This is Home!</div><div><Link to="/Page1/" style={{color:'black'}}><div>点击跳转到Page1</div></Link><Link to="/Page2/" style={{color:'black'}}><div>点击跳转到Page2</div></Link><Link to="/Page3/" style={{color:'black'}}><div>点击跳转到Page3</div></Link></div></div>);}}export default Home;

示范代码:

首先,大家要在上面用 import 引入2个Link组件,这一个组件由react-router-dom内部定义,用于链接跳转,在render函数的return中安装叁对Link标签,to前边填写Page1的地址(“/Page1/”、“/Page一”皆可),并含有跳转链接的文字。

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
 url: 'B?id=1'
})



// 此处是B页面
wx.navigateTo({
 url: 'C?id=1'
})


// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
 delta: 2
})

(style是设置字体颜色样式,可加可不加,关于体制的设置以往的稿子中会讲到)

(伍)使用<navigator/>标签完结页面跳转

今昔,大家访问 localhost:三千/ 能够看看:
4858美高梅 3

navigator

点击当中二个链接就能够跳转到特定的页面,比如Page1:

页面链接。

4858美高梅 4

参数 类型 必填 说明
url String 应用内的跳转链接
redirect Boolean false 打开方式为页面重定向,对应 wx.redirectTo(将被废弃,推荐使用 open-type)
open-type String navigate 可选值 ‘navigate’、’redirect’、’switchTab’,对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
hover-class String navigator-hover 指定点击时的样式类,当hover-class=”none”时,没有点击态效果
hover-start-time Number 50 按住后多久出现点击态,单位毫秒
hover-stay-time Number 600 手指松开后点击态保留时间,单位毫秒

专注,那里的跳转并不曾访问新的html文件,而是由React改变了本来html页面中的内容。

演示代码:

今昔,大家早已成功地选择 Router、Route 和 Link
达成了React页面跳转的成效.

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
 <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
 <navigator url="index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>

3.页面包车型大巴路由和生命周期

(一)页面包车型地铁路由

在小程序中具有页面的路由全体由框架举行保管,对于路由的接触格局以及页素不相识命周期函数如下:

路由情势

触发时机

路由后页面

路由前页面

初始化

小程序打开的率先个页面

onLoad,onShow

开辟新页面

调用 API wx.navigateTo 或利用组件

onLoad,onShow

onHide

页面重定向

调用 API wx.redirectTo 或采用组件

onLoad,onShow

onUnload

页面再次回到

调用 API wx.navigateBack 或用户按左上角重临按钮

onShow

onUnload(多层页面重临各种页面都会按梯次触发onUnload)

Tab 切换

调用 API wx.switchTab 或行使组件 或用户切换 Tab

种种情况请参见下表

Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A
页面打开的页面,D 页面是从 C 页面打开的页面为例):

当前页面 路由后页面 触发的生命周期(按顺序)
A A Nothing happend
A B A.onHide(), B.onLoad(), B.onShow()
A B(再次打开) A.onHide(), B.onShow()
C A C.onUnload(), A.onShow()
C B C.onUnload(), B.onLoad(), B.onShow()
D B D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D(从分享进入) A D.onUnload(), A.onLoad(), A.onShow()
D(从分享进入) B D.onUnload(), B.onLoad(), B.onShow()

四.参数字传送递

(一)通过路径传递参数

经过路径传递参数在wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)和<navigator/>中动用办法1致
以身作则代码:以wx.navigateTo为表示

```
wx.navigateTo({
 url: 'test?id=1'//实际路径要写全
})


//test.js
Page({
 onLoad: function(option){
 console.log(option.id) 
 }
})

参数与途径之间利用?分隔,参数键与参数值用=相连,分裂参数用&分隔;

test?id=一 中id为参数键,一 为参数值

在目标页面中onLoad()方法中option对象即为参数对象,能够通过参数键来取出参数值

感谢阅读,希望能帮助到大家,多谢我们对本站的帮助!

你大概感兴趣的篇章:

  • 微信小程序通过api接口将json数据显现到小程序示例
  • 微信小程序
    数据访问实例详解
  • 微信小程序-详解数据缓存
  • 微信小程序
    定义全局数据、函数复用、模版等详细介绍
  • 微信小程序
    详解页面跳转与再次来到并回传数据
  • 微信小程序
    化解请求服务器手提式有线电话机预览请求不到多少的主意
  • 微信小程序
    当地数据存款和储蓄实例详解
  • 微信小程序
    数据绑定详解及实例
  • 微信小程序
    数据封装,参数字传送值等经验分享
  • 微信小程序
    数据交互与渲染实例详解
  • 微信小程序数据存款和储蓄与取值详解

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有