通过命令新建页面news:

ng g page news

会在src/app目录下自动生成以下文件，并更新app-routing.module.ts总路由文件。

再来看看app-routing.module.ts文件，已自动配置好了新页面的路由。

从路由可以看出，我创建了两个页面，一个home，一个news。
现在想从home页面跳转到news页面去，并携带参数，该怎么传呢？

路由跳转和传参

方式一：

设定：home页面跳转news页面需要传递参数empNo。

第一步：修改路由。

src/app/app-routing.module.ts

{path: 'news/:empNo',loadChildren: () => import('./news/news.module').then( m => m.NewsPageModule)}

第二步：跳转路由传参。

src/app/home/home.page.ts

clickMe() {console.log('点我跳转');this.router.navigate(['/news','9295'])}

第二步：目标页面接收参数。

src/app/news/news.page.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';@Component({selector: 'app-news',templateUrl: './news.page.html',styleUrls: ['./news.page.scss'],
})
export class NewsPage implements OnInit {constructor(private route: ActivatedRoute, private router: Router) { }ngOnInit() {const routeParams=this.route.snapshot.paramsconsole.log(routeParams)}}

打印结果：

{empNo: '3'}

方式二：

设定：home页面跳转news页面需要传递参数对象。

第一步：跳转路由传参。

src/app/home/home.page.ts

 clickMe() {console.log('点我跳转');this.router.navigate(['/news'],{queryParams:{name:'张三',id:'1234567801',}})}

第二步：目标页面接收参数。

src/app/news/news.page.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';@Component({selector: 'app-news',templateUrl: './news.page.html',styleUrls: ['./news.page.scss'],
})
export class NewsPage implements OnInit {constructor(private route: ActivatedRoute, private router: Router) { }ngOnInit() {const routeParams=this.route.snapshot.queryParamsconsole.log(routeParams)}}

打印结果：

{name: '张三', id: '1234567801'}

路由守卫

路由守卫会对路由跳转进行拦截。

像移动端手机物理返回键的监听控制，可以通过路由守卫来控制要返回到哪个路由页面。
还常用这些场景：

1.该用户可能无权导航到目标组件。

2.可能用户得先登录（认证）。

3.在显示目标组件前，你可能得先获取某些数据。

4.在离开组件前，你可能要先保存修改。

5.你可能要询问用户：你是否要放弃本次更改，而不用保存它们？

路由器可以支持多种守卫接口：

用CanActivate来处理导航到某路由的情况。
用CanActivateChild来处理导航到某子路由的情况。
用CanDeactivate来处理从当前路由离开的情况.
用Resolve在路由激活之前获取路由数据。
用CanLoad来处理异步导航到某特性模块的情况。

第一步：执行命令，生成路由守卫。

ng g guard home

然后就会出现选择器，选择你需要的守卫接口。

然后就生成home.guard.ts文件。

第二步：配置路由守卫。

配置home-routing.module.ts路由守卫。

第三步：操作路由守卫。

我用的比较多的是canDeactivate，从当前路由离开时会进行触发。

1.先对home.guard.ts进行配置。

2.在home.page.ts中配置canLeave方法。

 canLeave(){console.log('--canLeave--')return false}

效果：
点击页面跳转按钮，
页面未跳转，并打印
–canLeave–

说明路由守卫控制成功。

angular学习总结-路由和路由守卫相关推荐

迷你MVVM框架 avalonjs 学习教程20、路由系统
迷你MVVM框架 avalonjs 学习教程20.路由系统时间 2014-10-28 14:44:00 Ruby's Louvre 原文 http://www.cnblogs.com/rubyl ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
Flutter学习日记之使用路由进行页面切换
本文地址:https://blog.csdn.net/qq_40785165/article/details/116900126,转载需附上此地址大家好,我是小黑,一个还没秃头的程序员~~~ 你多学 ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
laravel5.0学习系列1之路由
Laravel5.0学习系类一路由最近因为实习工作的需要,在学习者php的框架--laravel. 因为网上没有找到相关方面的基础学习资料,加上最近自己在学习,于是就记下相关知识!方便以后查阅 la ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
Vue中路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
vue3：路由守卫（全局守卫、路由独享守卫、组件内守卫）
router.js:全局守卫 import {createRouter,createWebHashHistory } from 'vue-router'// 省略了routes 中的路由规则 cons ...
路由守卫的几种方法、全局守卫、路由独享守卫、组件内部守卫
路由独享守卫,守的是path 组件内部守卫,守的是component 全局守卫 // src/router/index.js1.前置钩子router.beforeEach((to, from, nex ...
vue路由（十二）路由独享守卫beforeEnter和页面内组件路由守卫：beforeRouteEnter，beforeRouteLeave，beforeUpdate
1 路由独享守卫,单个路由拦截处理 {path: '/Test',name: 'Test',components: {default: () => import('../views/Test.v ...

angular学习总结-路由和路由守卫

路由跳转和传参

方式一：

第一步：修改路由。

第二步：跳转路由传参。

第二步：目标页面接收参数。

方式二：

第一步：跳转路由传参。

第二步：目标页面接收参数。

路由守卫

1.该用户可能无权导航到目标组件。

2.可能用户得先登录（认证）。

3.在显示目标组件前，你可能得先获取某些数据。

4.在离开组件前，你可能要先保存修改。

5.你可能要询问用户：你是否要放弃本次更改，而不用保存它们？

第一步：执行命令，生成路由守卫。

第二步：配置路由守卫。

第三步：操作路由守卫。

1.先对home.guard.ts进行配置。

2.在home.page.ts中配置canLeave方法。

angular学习总结-路由和路由守卫相关推荐

最新文章

热门文章