关于angular2跳路由防止页面刷新的做法(Angular2路由重载)
simpleReuseStrategy.ts
// 创建重用策略
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
/**
* 路由重用策略
*/
export class SimpleReuseStrategy implements RouteReuseStrategy {
// 保存路由快照
// [key:string] 键为字符串类型
// DetachedRouteHandle 值为路由处理器
// public handlers: { [key: string]: DetachedRouteHandle } = {};
public static handlers: { [key: string]: DetachedRouteHandle } = {};
public static deleteRouteSnapshot(path?: string): void {
if (!path) {
SimpleReuseStrategy.handlers = {};
return;
}
const name = path.replace(/\//g, '_');
if (SimpleReuseStrategy.handlers[name]) {
delete SimpleReuseStrategy.handlers[name];
}
}
/**
* 从缓存中获取快照
* @param {ActivatedRouteSnapshot} route
* @return {DetachedRouteHandle | null}
*/
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
return SimpleReuseStrategy.handlers[route.routeConfig.path];
}
/**
* 是否允许还原
* @param {ActivatedRouteSnapshot} route
* @return {boolean} true-允许还原
*/
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return !!route.routeConfig && !! SimpleReuseStrategy.handlers[route.routeConfig.path];
}
/**
* 确定是否应该分离此路由(及其子树)以便以后重用
* @param {ActivatedRouteSnapshot} route
* @return {boolean}
*/
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return route.data.reload === false;
}
/**
* 进入路由触发, 判断是否为同一路由
* @param {ActivatedRouteSnapshot} future
* @param {ActivatedRouteSnapshot} curr
* @return {boolean}
*/
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
// future - 未来的(下一个)路由快照
return future.routeConfig === curr.routeConfig;
}
/**
* 保存路由
* @param {ActivatedRouteSnapshot} route
* @param {DetachedRouteHandle | null} handle
*/
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
// 通过 Route.path 映射路由快照, 一定要确保它的唯一性
// 也可以通过 route.routeConfig.data.uid 或其他可以确定唯一性的数据作为映射key
// 作者这里能够确保 path 的唯一性
SimpleReuseStrategy.handlers[route.routeConfig.path] = handle;
}
}
在app.module.ts里面引入和配置
providers: [
{ provide: RouteReuseStrategy, useClass: SimpleReuseStrategy },
{ provide: NZ_I18N, useValue: en_US },
ConfigService, HttpInterceptorProviders
],
在相应模块的module里面路由配置末尾加上data: {reload: false}
实现路由重载
const routes: Routes = [
{
path: '',
component: AuthorityManagementComponent,
children: [
{ path: '', redirectTo: 'authority-manage', pathMatch: 'full' },
{ path: 'authority-manage', component: AuthorityManageComponent, data: {reload: false} }, // 路由重载
{ path: 'add-authority', component: AddAuthorityComponent, data: {reload: false} },
{ path: 'follow-setting', component: FollowSettingComponent, data: {reload: false} },
{ path: 'order-setting', component: OrderSettingComponent, data: {reload: false} },
{ path: 'refund-setting', component: RefundSettingComponent, data: {reload: false} },
{ path: 'sales-setting', component: SalesSettingComponent, data: {reload: false} }
]
}
];
关于angular2跳路由防止页面刷新的做法(Angular2路由重载)的更多相关文章
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- react-navigation的多次点击重复跳转同一页面、不在堆栈路由页面使用navigation方法的解决思路
一.react-navigation的初使用 createStackNavigator ==> createSwitchNavigator ==> createAppContaine ...
- Vue实现远程获取路由与页面刷新导致404错误的解决
一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是 ...
- vue通过路由实现页面刷新
vue 开发微信商城项目,需求如下: 购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非 ...
- vue 键盘回车事件导致页面刷新的问题,路由多了一个问号
问题: <el-form @submit.native.prevent> <el-form-item > <el-input @keyup.enter.native=&q ...
- vue路由传参刷新丢失
没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...
- vue爬坑之路1-路由跳转全新页面以及二级页面配置
之前也在网找了一些答案,比较零碎,特此总结下,废话不多说,直接上干货! 路由跳转全新页面 首先在app.vue中先定义router-view,这是主路由. 在router的index.js中引入log ...
- 解决angular2页面刷新后报404错误
如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址. ...
- 直击--vue项目微信小程序页面跳转web-view不刷新-根源
背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...
随机推荐
- vue接口交互写死的
vue接口 写死的 RoleOfUserOrgRef: function ({ commit }, param) { return new Promise((resolve) => { $axi ...
- 约数个数函数(d)的一个性质证明
洛谷P3327 [SDOI2015]约数个数和 洛谷P4619 [SDOI2018]旧试题 要用到这个性质,而且网上几乎没有能看的证明,所以特别提出来整理一下. \[ d(AB) = \sum_{x| ...
- UML类图说明
1:示例 这是一个使用UML表示的类图的结构,通过箭头,菱形,实线以及虚线来代表一些类之间的关系,后面将按照上面的例子一一介绍说明. 上图中,abstract 车是一个抽象类.小汽车和自行车是继承了车 ...
- win10系统开发环境安装studio 3T(MongoDB桌面客户端)
studio 3T 是mongodb优秀的桌面客户端工具. 下载 https://studio3t.com/download/#windows 本教程基于2020.1.2版本 安装 F:\javawe ...
- IntelliJ IDEA 2019.2 LUA环境搭建说明
1.搭建GCC 添加系统环境变量PATH 为C:\MinGW\bin目录 测试命令进入CMD gcc -v 2.编译LUA cd到lua/src目录 mingw32-make min ...
- kubectl 常用命令一
1.kubectl logs <options> <PodName> -f -p, --previous --since= No. --since-time= --tail ...
- 887C. Slava and tanks#轰炸弹坦克游戏(分析)
题目出处:http://codeforces.com/problemset/problem/877/C 题目大意:按照游戏规则,求最小炸弹使用次数 #include<iostream> u ...
- goweb-go语言基础
go语言基础 虽然这本书是讲goweb,但还是吧go语言基础过了一遍,由于我之前已经对go语言基础做了一遍系统的学习,这里就当简单回顾一下,不再写过多笔记了,之前的写的博客都有基础知识,O(∩_∩)O ...
- 17)PHP,函数基础和参数问题
(1)函数定义形式: function 函数名字(形参1,形参2,形参3........) { 函数体(代码块) } (2)调用形式: 第一种:没有返回值的函数,则调用独立的语句 函数名(实参1,实参 ...
- ZJNU 1138 - 小兔的棋盘——中级
二维图的动态规划因为不能穿越对角线,则选取对角线的一边dp即可选取对角线右下侧则x轴上每个点只能由其左侧的点走过去(只有1条)对角线上的点只能由对角线下方的点走过去其他点可以由左侧和下侧两种方式到达因 ...