angular router 路由的简单实用
angular路由的使用
-
首先要添加了路由服务文件（在创建项目的时候会询问，如果当时没有创建俺的话需要手动创建）
-
下边是一个现成的路由文件，可以参考
//app.module.tsimport { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { SignupComponent } from "./components/signup/signup.component";import { SigninComponent } from "./components/signin/signin.component";import { LayoutComponent } from "./components/layout/layout.component";import { ContactListComponent } from "./components/contact-list/contact-list.component";import { ContactEditComponent } from "./components/contact-edit/contact-edit.component";import { ContactNewComponent } from "./components/contact-new/contact-new.component";import { TagListComponent } from "./components/tag-list/tag-list.component";import { TagEditComponent } from "./components/tag-edit/tag-edit.component";import { TagNewComponent } from "./components/tag-new/tag-new.component";import {AuthGuard} from './auth_guard.service'const routes: Routes = [ //路由对象{path:'',redirectTo:'/contacts',//当请求根路径的时候，跳转到contacts路径pathMatch:'full' //必须完全匹配到路径的时候才做路由重定向},{path:'layout',component: LayoutComponent},{path:'contacts',component: LayoutComponent,canActivate: [AuthGuard], // 在导航 contacts 之前会先进入路由守卫children:[ //子路由设置{path:'',component: ContactListComponent,},{path:'edit/:id',// 路由传参component: ContactEditComponent},{path:'new',component: ContactNewComponent},]},{path:'tags',component: LayoutComponent,canActivate: [AuthGuard], // 在导航 contacts 之前会先进入路由守卫children:[{path:'',component: TagListComponent,},{path:'edit',component: TagEditComponent},{path:'new',component: TagNewComponent},]},{path:'signin',component: SigninComponent},{path:'signup',component: SignupComponent},];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule],providers: [AuthGuard]})export class AppRoutingModule { } 路由守卫服务文件也贴上，方便对照
//auth_guard.service.ts
import { Injectable } from '@angular/core';import { CanActivate, Router } from '@angular/router';@Injectable()export class AuthGuard implements CanActivate {constructor (private router: Router) {}canActivate() {const token = window.localStorage.getItem('auth_token') //这个 token 是我的angular APP验证用的东西，验证通过则跳转可以访问路由，不通过则跳转登录页if (!token) {this.router.navigate(['/signin'])return false // 不能继续导航}// 如果验证通过，则放行，继续完成导航return true;}}如果配置过程中出现问题的话，建议查看app.module中是否注入路由文件依赖。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！