Angular2 Router路由相关

路由设置

Angular中路由的配置应该按照先具体路由到通用路由的设置,因为Angular使用先匹配者优先的原则。

eg: 路由设置如下:

export const reportRoute: Routes = [
    {
        path: ‘report‘,
        children: [
             {
                  path: ‘‘,
                  component: ReportComponent
             },{
                   path: ‘:id‘,
                   component: ReportDetailComponent
             },{
                     path: ‘report-new‘,
                     component: ReportNewComponent
             }
         ]
    }
];

在report页面,点击其上的创建按钮想要进入report-new页面,然而却报下面的错误:

原来路由先匹配到了report/:id这个路由,它把report-new当成了id参数进入了report-detail页面去获取report的detail去了。

将路由改成下面这样就OK了

export const reportRoute: Routes = [
    {
        path: ‘report‘,
        children: [
             {
                  path: ‘‘,
                  component: ReportComponent
             },{
                   path: ‘report-new‘,
                   component: ReportNewComponent
             },{
                     path: ‘:id‘,
                     component: ReportDetailComponent
             }
         ]
    }
];

路由链接激活状态

<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

通过为链接设置属性routerLinkActive="active"可以让路由链接保持为激活状态,当路由被激活时,会动态绑定一个active的class,通过设置类active的样式即可设置激活路由链接的样式。RouterLinkActive指令会基于当前的RouterState对象来为激活的RouterLink切换CSS类。这会一直沿着路由树往下进行级联处理,所以子路由和父路由链接可能会同时激活。

要改变这种行为,可以把[routerLinkActiveOptions]绑定到{exact: true}表达式。如果使用了{exact: true},那么只有在其URL与当前URL精确匹配时才会激活指定的RouterLink。

路由守卫

CanActivate

CanActivateChild

CanDeactivate

Resolve

CanLoad

路由传参

路由跳转时使用navigate传参

  • 单个参数:this.router.navigate([‘/reports‘, report.id]);
  • 多个参数:this.router.navigate([‘/reports‘, {id: report.id, type: ‘PATIENT_CASE‘}]);

在链接参数数组中,路由器支持“目录式”语法来指导我们如何查询路由名:

  • /,从根路径开始,
  • ./或无前导斜线形式,相对于当前路径,
  • ../,从当前路径的上一级开始
时间: 2024-10-16 07:23:18

Angular2 Router路由相关的相关文章

Angular2 Router

1 import Router import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router'; 2 setting your RouteConfig @RouteConfig([ {path: '/', component: List, as: 'list'}, {path: '/about', component: Add, as: 'add'}, {path: '/help',

[Angular2 Router] Resolving route data in Angular 2

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r

Linux之网络管理(6)ip及路由相关命令

Linux之网络管理(6)ip及路由相关命令 linux中提供了很多强大的网络管理工具,而且每更新一些版本后都会有新功能.新工具的出现,对于ip和route设置最常用的,就是ifconfig.route等命令了. IP及设备相关的命令使用: ifconfig 命令 查看接口设备信息 ifconfig                 #查看所有启用(up状态)的接口信息 ifconfig  ifcfg-x        #查看指定的网络接口信息 ifconfig  -a             #

第三章 router路由

本章,安装router 今天体验一下ui, 在terminal里,执行vue ui 打开ui界面,在上面就有添加vue-router,安装完成,依赖里就能看到了 安装之后,项目中自动出现了router.js和views文件夹. 此时我们运行项目的话.就能看到在绿V的上面多出来了Home|About的链接,点击进行跳转,这就是路由了 我们看看都安装了什么. router.js.views/Home.vue.views/Login.vue 首先main.js,多出来引用router的文件,并在下面的

04 Vue Router路由管理器

路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发. Vue Router包含的功能有: 支持HTML5 历史模式或hash模式 支持嵌套路由 支持路由参数 支持编程式路由 支持命名路由 vue-router的基本使用 基本使用步骤 1.引入相关的库文件 导入vue文件为全局window对象挂载Vue构造函数

vue router路由(三)

当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) node_modules 根据package.json 安装依赖模块 src资源文件,基本文件都会放在这里 app.vue  父组件 main.js 入口文件 static构建好的文件会在这个目录 index.html 主页 1.首先安装路由通过npm: npm install vue-router 在

16. Dubbo原理解析-集群&amp;容错之router路由服务

Router服务路由, 根据路由规则从多个Invoker中选出一个子集AbstractDirectory是所有目录服务实现的上层抽象, 它在list列举出所有invokers后,会在通过Router服务进行路由过滤. Router接口定义 public interface Router extendsComparable<Router> { URL getUrl(); <T> List<Invoker<T>> route(List<Invoker<

node 学习笔记1 router路由

1. var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('hello world'); }); app.listen(3000); 一个最为常见的 路由 2. var admin = express(); admin.get('/', function (req, res) { console.log(admin.mountpath); // [ '/a

Orchard源码分析(7.1):Routing(路由)相关

概述 关于ASP.NET MVC中路由有两个基本核心作用,一是通过Http请求中的Url参数等信息获取路由数据(RouteData),路由数据包含了area.controller.action的名称等信息.只有获取了匹配的路由数据,才有可能转入ASP.NET MVC管道:二是根据由规则生成Url,比如要根据某些数据生成View上显示的链接. Orchard对路由进行扩展主要基于如下原因: (1).路由定义在各个模块中.在Orchard应用程序初始化时将分散在各个模块的路由定义收集起来统一注册.