import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { Code404Component } from './code404/code404.component';
import { ProductDescComponent } from './product-desc/product-desc.component';
import { SellerInfoComponent } from './seller-info/seller-info.component';
import { ChatComponent } from './chat/chat.component';
import { LoginGuard } from './guard/login.guard';
import { UnsacedGuard } from './guard/unsaced.guard'; const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'chat',
component: ChatComponent,
outlet: 'aux'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'product/:id',
component: ProductComponent,
children: [
{ path: '', component: ProductDescComponent },
{ path: 'seller/:id', component: SellerInfoComponent }
],
canActivate: [LoginGuard],
canDeactivate: [UnsacedGuard]
}
,
{
path: '**',
component: Code404Component
}
]; @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [LoginGuard, UnsacedGuard]
})
export class AppRoutingModule { }

angular 守卫路由的更多相关文章

  1. Angular 4 路由介绍

    Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...

  2. angular -- ng-ui-route路由及其传递参数?script标签版

    考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...

  3. angular 之路由

    1.用angular-cli建一个工程自带路由怎么做? 命令:ng new  项目名 --routing 2.怎么使用路由器和路由器的一些基本使用. //html页面 <a routerLink ...

  4. angular 前端路由不生效解决方案

    angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...

  5. Angular配置路由以及动态路由取值传值跳转

    Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...

  6. Angular 4 路由守卫

    路由守卫 只有当用户已经登录并拥有某些权限时才能进入某些路由 一个有多个表单组成的向导,如注册流程,用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由 当用户未执行保存操作而试图离开 ...

  7. angular 2+ 路由守卫

    1. 定义接口名称 /domain/login-guard.ts export interface LoginGuard { data: any; msg: string; status: boole ...

  8. angular的路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 下面 ...

  9. angular中路由的实现(针对新手)

    最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引. 首先当然需要准备angular,下载地址:https://angular.io/ 现在a ...

随机推荐

  1. 终端启动tomcat报错 command not found 解决方法 (含启动和关闭命令)

    Tomcat配置步骤: 1.cd命令进入Tomcat安装路径的bin下 2.sudo chmod 755*.sh 输入appleID密码获得相关权限 3.sudo sh ./startup.sh启动T ...

  2. 分布式缓存系统 Memcached 工作线程初始化

    Memcached采用典型的Master-Worker模式,其核心思想是:有Master和Worker两类进程(线程)协同工作,Master进程负责接收和分配任务,Worker进程负责处理子任务.当各 ...

  3. tp5下通过composer实现日志记录功能

    tp5实现日志记录 1.安装 psr/log composer require psr/log 它的作用就是提供一套接口,实现正常的日志功能! 我们可以来细细的分析一下,LoggerInterface ...

  4. Apache+PHP多端口多站点

    # # Listen: Allows you to bind Apache to specific IP addresses and/or # ports, instead of the defaul ...

  5. 动态代理AOP实现方法过滤

    上一节实现了动态代理,接下来 有时候,我不需要在每一个方法都要记录日志,做权限验证 等等. 所有就有了这样的需求.AOP实现特定方法过滤,有选择性的来对方法实现AOP 拦截.就是本节标题所示. 举个例 ...

  6. 用exp、dmp导入导出用户到同一个实例下时,类型type会有问题

    oralce的type都有唯一id,在同一个实例下,通过导入导出方法创建type时,会有唯一性问题 最好的解决方法使用impdb,expdb的方式导入导出 用oid=n解决. 实在不行,可用稍微麻烦的 ...

  7. Flask 数据库多对多关系

    数据库使用关系建立记录之间的联系.其中,一对多关系是最常用的关系类型,它把一个记录和一组相关的记录联系在一起.实现这种关系时,要在“多”这一侧加入一个外键,指向“一”这一侧联接的记录.大部分的其他关系 ...

  8. CBV中的dispatch

    之前介绍了FBV和CBV ,下面我们看一下CBV中的dispatch dispatch函数在类View中定义,作用就是通过反射查找get或post函数,所以在执行get或post函数之前,dispat ...

  9. Oracle11gR2_ADG管理之恢复主库的truncate表实战

    备库开启flashback database #关闭备库的同步 SQL> alter database recover managed standby database cancel; Data ...

  10. [iOS]通过xib定义Cell然后关联UICollectionView

    先新建一个View的xib,然后删掉自动生成的View,拖进一个UICollectionCell,再新建一个对应的UIView继承UICollectionCell类. OK,接下来该连outlet的就 ...