zoukankan      html  css  js  c++  java
  • [Angular2 Router] Configuring a Home Route and Fallback Route

    In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly used routing scenarios: what if the user goes to the root of the application manually ? Probably you would want some sort of home page to be displayed. Also another very common scenario is: what should be the behaviour of the application when an unknown url is accessed? We are already know that in the server everything is getting redirected to the index.html file, so how do we handle this on the client?

    We are going to answer those questions by learning how to configure the angular 2 router to have both an index or home route, and a fallback route. We are also going to learn an essential concept about routing configuration.

    app.routes.ts:

    import {RouterModule} from "@angular/router";
    import {NotFoundComponent} from "./shared-components/not-found/not-found.component";
    
    const indexRoute = {path: '', loadChildren: 'app/home/home.module'};
    const fallbackRoute = {path: '**', component: NotFoundComponent};
    const routes = [
      {path: 'home', loadChildren: 'app/home/home.module', name: 'Home'},
      {path: 'heros', loadChildren: 'app/heros/heros.module', name: 'Heros'},
      {path: 'contact', loadChildren: 'app/contact/contact.module', name: 'Contact'},
      indexRoute,
      fallbackRoute
    ];
    
    export default RouterModule.forRoot(routes);

    Notice here, the order does matter, if put fallbackRoute to the first place, it will error out.

    Github

  • 相关阅读:
    c++语法(2)
    c++语法(1)
    前端之 BOM和DOM
    JavaScript
    CSS属性相关(续)
    CSS属性相关
    CSS选择器
    前端之CSS
    HTML常用标签
    HTML介绍
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5910571.html
Copyright © 2011-2022 走看看