详解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 相关文章推荐
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
js创建对象的方式总结
Jan 10 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
JSONP跨域请求
Mar 02 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
webpack入门必知必会
2017/01/16 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
python修改操作系统时间的方法
2015/05/18 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
python中的变量如何开辟内存
2018/06/26 Python
详解Python中的正则表达式
2018/07/08 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
校园环保建议书
2014/05/14 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
社会实践单位意见
2015/06/05 职场文书
致青春观后感
2015/06/09 职场文书
社区安全温馨提示语
2015/07/14 职场文书
2016年父亲节寄语
2015/12/04 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript