详解Angular4中路由Router类的跳转navigate


Posted in Javascript onJune 09, 2017

最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习。

官方地址:https://angular.cn/docs/ts/latest/api/router/index/Router-class.html

在学习的过程中路由(router)机制是离不开的,并且好多地方都要用到。

首先路由配置Route:

import { NgModule }       from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { HomeComponent }  from './home.component';
import { LoginComponent }   from './login.component';
import { RegisterComponent } from './register.component';
 
 const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'heroes',   component: RegisterComponent }
 ];
 
 @NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

 其次路由跳转Router.navigate

navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>
interface NavigationExtras {
  relativeTo : ActivatedRoute
  queryParams : Params
  fragment : string
  preserveQueryParams : boolean
  queryParamsHandling : QueryParamsHandling
  preserveFragment : boolean
  skipLocationChange : boolean
  replaceUrl : boolean
}

1.以根路由跳转/login

this.router.navigate(['login']);

2.设置relativeTo相对当前路由跳转,route是ActivatedRoute的实例,使用需要导入ActivatedRoute

this.router.navigate(['login', 1],{relativeTo: route});

3.路由中传参数 /login?name=1

this.router.navigate(['login', 1],{ queryParams: { name: 1 } });

4.preserveQueryParams默认值为false,设为true,保留之前路由中的查询参数/login?name=1 to /home?name=1

this.router.navigate(['home'], { preserveQueryParams: true });

5.路由中锚点跳转 /home#top

this.router.navigate(['home'],{ fragment: 'top' });

6.preserveFragment默认为false,设为true,保留之前路由中的锚点/home#top to /role#top

this.router.navigate(['/role'], { preserveFragment: true });

7.skipLocationChange默认为false,设为true,路由跳转时浏览器中的url会保持不变,但是传入的参数依然有效

this.router.navigate(['/home'], { skipLocationChange: true });

8.replaceUrl默认为true,设为false,路由不会进行跳转

this.router.navigate(['/home'], { replaceUrl: true });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
基于vue2.0实现的级联选择器
Jun 09 #Javascript
JavaScript设计模式之代理模式详解
Jun 09 #Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 #Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 #Javascript
JS创建Tag标签的方法详解
Jun 09 #Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 #Javascript
JS实现的随机排序功能算法示例
Jun 09 #Javascript
You might like
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
window.open的功能全解析
2006/10/10 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
详解微信小程序的 request 封装示例
2018/08/21 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[00:35]可解锁地面特效
2018/12/20 DOTA
详解K-means算法在Python中的实现
2017/12/05 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python tkinter模版代码实例
2020/02/05 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
幼儿教师寄语集锦
2014/04/03 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
委托证明书
2014/09/17 职场文书
免职通知
2015/04/23 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
SQL Server内存机制浅探
2022/04/06 SQL Server