Angular Route導(dǎo)航

Angular Route導(dǎo)航

路由基礎(chǔ)知識(shí)

路由相關(guān)對象介紹

名稱 簡介
Routes 路由配置定嗓,保存著哪個(gè)URL對應(yīng)展示哪個(gè)組件敦姻,以及在哪個(gè)RouterOutlet中展示組件秉馏。
RouterOutlet 在Html中標(biāo)記路由內(nèi)容呈現(xiàn)位置的占位符指令搪桂。
Router 負(fù)責(zé)在運(yùn)行時(shí)執(zhí)行路由的對象康谆,可以通過調(diào)用其navigate()和navigateByUrl()方法來導(dǎo)航到一個(gè)指定的路由赐劣。
RouterLink 在Html中聲明路由導(dǎo)航用的指令柄慰。
ActivatedRoute 當(dāng)前激活的路由對象鳍悠,保存著當(dāng)前路由的信息,如路由地址坐搔,路由參數(shù)等藏研。

新建路由項(xiàng)目

使用angular-cli新建項(xiàng)目。

ng new router --routing

新生成一個(gè)帶有app-routing.module.ts路由模塊的項(xiàng)目概行。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts模塊中會(huì)導(dǎo)入AppRoutingModule模塊蠢挡。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule   <<=== add here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

再生成homeproduct組件。

ng g component home
ng g component product

修改新建組件內(nèi)容

home.component.html

<p>
  這里是主頁組件
</p>

product.component.html

<p>
  這里是商品信息組件
</p>

添加路由配置

修改app-routin.module.ts路由配置文件。

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {ProductComponent} from './product/product.component';

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product', component: ProductComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

修改app.component.html頁面模版袒哥。

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/']">主頁</a>
<a [routerLink]="['/product']">商品詳情</a>

<router-outlet></router-outlet>

routerLink參數(shù)是數(shù)組類型缩筛,以便傳遞參數(shù)。

運(yùn)行項(xiàng)目

ng serve --open運(yùn)行項(xiàng)目堡称。

修改app.component.html給頁面模版添加一個(gè)商品詳情按鈕瞎抛。

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/']">主頁</a>
<a [routerLink]="['/product']">商品詳情</a>
<input type="button" value="商品詳情" (click)="toProductDetails()">

<router-outlet></router-outlet>

其中在app.component.ts實(shí)現(xiàn)toproductDetails()方法

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'router';

  constructor(private router: Router) {

  }

  toProductDetails() {
    this.router.navigate(['product']);
  }
}

這里方法中使用Routernavigate方法實(shí)現(xiàn)路由跳轉(zhuǎn)。

這里routeLink是通過前端頁面實(shí)現(xiàn)跳轉(zhuǎn)却紧,而navigate是通過后臺(tái)組件實(shí)現(xiàn)跳轉(zhuǎn)桐臊。

實(shí)現(xiàn)訪問不存在頁面跳轉(zhuǎn)

創(chuàng)建code404組件,實(shí)現(xiàn)默認(rèn)跳轉(zhuǎn)頁面晓殊。

ng g component code404

code404.component.html頁面模版內(nèi)容断凶。

<p>
  404 Not Found!
</p>

路由配置,修改app-routing.module.ts巫俺,添加頁面不存時(shí)顯示頁面认烁。

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';

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product', component: ProductComponent},
  {path: '**', component: Code404Component}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

路由器使用先匹配者優(yōu)先選擇原則,所以通配符路由要放在路由配置的最后面介汹。

路由時(shí)傳遞數(shù)據(jù)

第一種方式

/product?id=1&name=2  =>  ActivateRoute.queryParams[id]

第二種方式

{path: /product/:id}  =>  /product/1  =>  ActivateRoute.params[id]

第三種方式

{path: /product, component: ProductComponent, data: [{isProd: true}]}  =>  ActivateRoute.data[0][isProd]

修改app.component.html頁面模版却嗡。

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/']">主頁</a>
<a [routerLink]="['/product']" [queryParams]="{id: 1}">商品詳情</a>
<input type="button" value="商品詳情" (click)="toProductDetails()">

<router-outlet></router-outlet>

點(diǎn)擊頁面商品詳情鏈接,URL跳轉(zhuǎn)變?yōu)?code>http://localhost:4200/product?id=1嘹承。

下面來看看怎么在商品詳情組件中接受這個(gè)傳遞參數(shù)窗价。

首先在商品詳情組件product.component.ts中注入ActivatedRoute組件,然后在其中聲明一個(gè)productId來接收傳進(jìn)來的id叹卷,如第一種方式所示撼港,使用queryParams獲取傳遞值。

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private productId: number;

  constructor(private routeInfo: ActivatedRoute) {
  }

  ngOnInit() {
    this.productId = this.routeInfo.snapshot.queryParams['id'];
  }

}

頁面上展示ID值骤竹。

<p>
  這里是商品信息組件
</p>
<p>
  商品ID是: {{productId}}
</p>

修改app-routing.module.ts路由配置中的path屬性使其可以攜帶參數(shù)帝牡。

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';

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product/:id', component: ProductComponent},
  {path: '**', component: Code404Component}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

然后修改app.component.html路由鏈接的參數(shù)來傳遞數(shù)據(jù)。

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/']">主頁</a>
<a [routerLink]="['/product', 1]">商品詳情</a>
<input type="button" value="商品詳情" (click)="toProductDetails()">

<router-outlet></router-outlet>

點(diǎn)擊頁面商品詳情鏈接蒙揣,URL跳轉(zhuǎn)變?yōu)?code>http://localhost:4200/product/1

如第二種方式否灾,修改商品詳情組件product.component.ts,將queryParams改為params即可鸣奔。

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private productId: number;

  constructor(private routeInfo: ActivatedRoute) {
  }

  ngOnInit() {
    this.productId = this.routeInfo.snapshot.params['id'];
  }

}

點(diǎn)擊商品詳情鏈接頁面上展示ID值為1。

<u>什么是參數(shù)快照惩阶?什么是參數(shù)訂閱挎狸?</u>

參數(shù)快照就是snapshot,這里如果切換商品詳情頁面断楷,雖然URL會(huì)來回切換锨匆,但是ID的顯示值并不會(huì)改變。所以采用參數(shù)訂閱方式。

參數(shù)訂閱恐锣,subscribe

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private productId: number;

  constructor(private routeInfo: ActivatedRoute) {
  }

  ngOnInit() {
    // this.productId = this.routeInfo.snapshot.params['id'];
    this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);
  }

}

重定向路由

在用戶訪問一個(gè)特定的地址時(shí)茅主,將其重定向到另一個(gè)指定的地址。

www.aaa.com  =>  www.aaa.com/products

www.aaa.com/x  =>  www.aaa.com/y

修改app-routing.module.ts土榴,添加重定向路由诀姚。

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';

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'product/:id', component: ProductComponent},
  {path: '**', component: Code404Component}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

子路由

{path: 'home', component: HomeComponent}
{path: 'home', component: HomeComponent,
children: [
    {
        path: '', component: XxxComponent
    },
    {
        path: '/yyy', component: YyyComponent
    }
]}

新建商品描述組件和商品銷售員組件。

ng g component product-descng g component seller-info

修改product-desc.component.html模版頁面內(nèi)容玷禽。

<p>
  這是一個(gè)商品描述頁面
</p>

修改seller-info.component.html模版頁面內(nèi)容赫段,并傳遞sellerId

<p>
  銷售員ID是:{{sellerId}}
</p>

修改seller-info.component.ts控制器內(nèi)容矢赁,獲取路由傳遞參數(shù)。

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-seller-info',
  templateUrl: './seller-info.component.html',
  styleUrls: ['./seller-info.component.css']
})
export class SellerInfoComponent implements OnInit {
  private sellerId: number;

  constructor(private routeInfo: ActivatedRoute) {
  }

  ngOnInit() {
    this.sellerId = this.routeInfo.snapshot.params['id'];
  }

}

修改app-routing.module.ts,添加商品子路由配置志珍。

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';

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {
    path: 'product/:id', component: ProductComponent,
    children: [
      {path: '', component: ProductDescComponent},
      {path: 'seller/:id', component: SellerInfoComponent}
    ]
  },
  {path: '**', component: Code404Component}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

然后修改product.component.html模版頁面鬼佣,添加路由選項(xiàng)。

<p>
  這里是商品信息組件
</p>
<p>
  商品ID是: {{productId}}
</p>
<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller', 99]">銷售員信息</a>
<router-outlet></router-outlet>

這里./表示當(dāng)前頁面下面的路由選項(xiàng)這里就是http://localhost:4200/product/1/seller/99额获。

輔助路由

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

{path: 'xxx', component: XxxComponent, outlet: "aux"}
{path: 'yyy', component: YyyComponent, outlet: "aux"}

<a [routerLink]="['/home', {outlets: {aux: 'xxx'}}]">Xxx</a>
<a [routerLink]="['/product', {outlets: {aux: 'yyy'}}]">Yyy</a>

新建聊天組件

ng g component chat

修改模版頁面內(nèi)容

<textarea placeholder="content" class="chat"></textarea>

修改app-routing.module.ts够庙,添加輔助路由配置。

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';

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}
    ]
  },
  {path: '**', component: Code404Component}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

然后修改app.component.html路由鏈接的參數(shù)來傳遞數(shù)據(jù)咪啡。

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/home']">主頁</a>
<a [routerLink]="['/product', 1]">商品詳情</a>
<input type="button" value="商品詳情" (click)="toProductDetails()">
<a [routerLink]="[{outlets: {aux: 'chat'}}]">開始聊天</a>
<a [routerLink]="[{outlets: {aux: null}}]">結(jié)束聊天</a>
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

如果想同時(shí)指定這時(shí)主路由的跳轉(zhuǎn)首启,還請修改為

<a [routerLink]="[{outlets: {primary: 'home', aux: 'chat'}}]">開始聊天</a>

路由守衛(wèi)

只有當(dāng)用戶已經(jīng)登錄并擁有某些權(quán)限時(shí)才能進(jìn)入某些路由。

一個(gè)由多個(gè)表單組件組成的向?qū)С访缱粤鞒桃闾遥脩糁挥性诋?dāng)前路由的組件中填寫了滿足要求的信息才可以導(dǎo)航到下一個(gè)路由。

當(dāng)用戶未執(zhí)行保存操作而試圖離開當(dāng)前導(dǎo)航時(shí)提醒用戶准夷。

CanActivate:處理導(dǎo)航到某路由的情況钥飞。

CanDeactivate:處理從當(dāng)前路由離開的情況。

Resolve:在路由激活之前獲取路由數(shù)據(jù)衫嵌。

添加自定義路由守衛(wèi)login.guard.ts

import {CanActivate} from '@angular/router';

export class LoginGuard implements CanActivate {
  canActivate() {
    let loginIn: boolean = Math.random() < 0.5;
    if (!loginIn) {
      console.log('用戶未登錄');
    }
    return loginIn;
  }
}

修改app-routing.module.ts读宙,添加路由守衛(wèi)配置。

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';

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]
  },
  {path: '**', component: Code404Component}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard]
})
export class AppRoutingModule {
}

并且通過在providers添加LoginGuard來實(shí)現(xiàn)依賴注入楔绞。LoginGuard實(shí)現(xiàn)CanActivate方法结闸。

CanDeactivate同理。

添加product.resolve.ts酒朵,如果productId值為1則創(chuàng)建新對象傳遞進(jìn)商品詳情頁面桦锄,否則跳轉(zhuǎn)到主頁。

import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';
import {Product} from '../product/product.component';
import {Injectable} from '@angular/core';

@Injectable()
export class ProductResolve implements Resolve<Product> {

  constructor(private router: Router) {

  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Product> | Promise<Product> | Product {
    let productId: number = route.params['id'];
    if (productId == 1) {
      return new Product(1, 'Iphone7');
    } else {
      this.router.navigate(['/home']);
    }
  }
}

修改app-routing.module.ts蔫耽,添加reslove路由守衛(wèi)配置结耀。

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 {ProductResolve} from './guard/product.resolve';

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}
    ], resolve: {
      product: ProductResolve
    }
  },
  {path: '**', component: Code404Component}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [ProductResolve]
})
export class AppRoutingModule {
}

resolve中參數(shù)是一個(gè)對象,product是想傳遞進(jìn)去參數(shù)的名字,然后用ProductResolve來生成图甜。

在商品信息組件中在聲明productName

product.component.ts

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private productId: number;

  private productName: string;

  constructor(private routeInfo: ActivatedRoute) {
  }

  ngOnInit() {
    // this.productId = this.routeInfo.snapshot.params['id'];
    this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);
    this.routeInfo.data.subscribe((data: { product: Product }) => {
      this.productId = data.product.id;
      this.productName = data.product.name;
    });
  }

}

export class Product {
  constructor(public id: number, public name: string) {
  }

}

將傳遞進(jìn)來product對象的idname賦予我本地的productIdproductName屬性碍粥。

修改模版頁面product.component.html

<div class="product">
  <p>
    這里是商品信息組件
  </p>
  <p>
    商品ID是: {{productId}}
  </p>
  <p>
    商品名稱是: {{productName}}
  </p>
  <a [routerLink]="['./']">商品描述</a>
  <a [routerLink]="['./seller', 99]">銷售員信息</a>
  <router-outlet></router-outlet>
</div>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市黑毅,隨后出現(xiàn)的幾起案子嚼摩,更是在濱河造成了極大的恐慌,老刑警劉巖博肋,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件低斋,死亡現(xiàn)場離奇詭異,居然都是意外死亡匪凡,警方通過查閱死者的電腦和手機(jī)膊畴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來病游,“玉大人唇跨,你說我怎么就攤上這事〕某模” “怎么了买猖?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長滋尉。 經(jīng)常有香客問我玉控,道長,這世上最難降的妖魔是什么狮惜? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任高诺,我火速辦了婚禮,結(jié)果婚禮上碾篡,老公的妹妹穿的比我還像新娘虱而。我一直安慰自己,他們只是感情好开泽,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布牡拇。 她就那樣靜靜地躺著,像睡著了一般穆律。 火紅的嫁衣襯著肌膚如雪惠呼。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天峦耘,我揣著相機(jī)與錄音罢杉,去河邊找鬼。 笑死贡歧,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播利朵,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼律想,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了绍弟?” 一聲冷哼從身側(cè)響起技即,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎樟遣,沒想到半個(gè)月后而叼,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡豹悬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年葵陵,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瞻佛。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡脱篙,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出伤柄,到底是詐尸還是另有隱情绊困,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布适刀,位于F島的核電站秤朗,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏笔喉。R本人自食惡果不足惜取视,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望然遏。 院中可真熱鬧贫途,春花似錦、人聲如沸待侵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽秧倾。三九已至怨酝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間那先,已是汗流浹背农猬。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留售淡,地道東北人斤葱。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓慷垮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親揍堕。 傳聞我的和親對象是個(gè)殘疾皇子料身,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 一、SPA的概念 首先明確一個(gè)概念衩茸,SPA芹血,全稱為Single Page Application單頁應(yīng)用,一個(gè)單頁...
    耦耦閱讀 5,960評(píng)論 0 3
  • 路由是導(dǎo)航的另一個(gè)名字楞慈。路由器就是從一個(gè)視圖導(dǎo)航到另一個(gè)視圖的機(jī)制幔烛。 1.導(dǎo)航,那么我們專門做一個(gè)導(dǎo)航組件囊蓝。這個(gè)組...
    價(jià)值投機(jī)168閱讀 2,105評(píng)論 0 2
  • <1>輸入屬性 定義:組件的輸入屬性饿悬,是指被@input裝飾器注解的屬性,用來從父組件接收數(shù)據(jù) 實(shí)例1.新建ord...
    mumumuu閱讀 590評(píng)論 0 1
  • 時(shí)間就這樣慎颗,匆匆過去乡恕,轉(zhuǎn)眼來這座城市13年,有收獲俯萎,有遺憾傲宜,從什么都不懂的,像個(gè)傻子一樣跌跌撞撞中成長夫啊,最大的幸福...
    wy你會(huì)好的閱讀 145評(píng)論 0 0
  • 首先函卒,50億對我來說太多了,就我目前的水平根本沒能力駕馭50億撇眯,所以我壓根就想不出50億能干啥报嵌,以下所寫的估計(jì)有2...
    田妞1999閱讀 275評(píng)論 0 0