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

  • 相关阅读:
    Macaca拓展自己控件的方法
    pyparsing:定制自己的解析器
    利用 Traceview 精准定位启动时间测试的异常方法 (工具开源)
    Jenkins插件开发
    一个简陋的高并发请求脚本的演进过程
    python 自定义回调函数
    默认端口
    基本数据类型封装类比较
    grep命令和tail命令
    idea 拉取git新分支
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5910571.html
Copyright © 2011-2022 走看看