文章/答案/技术大牛

发布

社区首页 >问答首页 >有多个路由模块时的路由选择

问有多个路由模块时的路由选择
EN

Stack Overflow用户

提问于 2022-04-14 10:37:13

回答 1查看 836关注 0票数 0

我正在尝试创建一个使用角13的博客，我想把管理和主页分开。我有三个路由模块。app-routing.module.ts：

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

const routes: Routes = [
  //blog routes
  {
    path: '',
    redirectTo: '/blog',
    pathMatch: 'full' //means path needs to be full match with what has been configured.
  },
  {
    path: 'blog',
    loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) //() means Function
    //we use loadChildren when we want to use lazy loading. The other option is 'children'.
  },
  //auth routes
  {
    path: '',
    redirectTo: '/auth',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
  }
];

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

博客-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlogComponent } from '../layout/blog/blog.component';
import { FocusContentComponent } from '../layout/blog/focus-content/focus-content.component';

const blogRoutes: Routes = [
  {
    path: '',
    component: BlogComponent
  },
  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: 'mainpost',
        component: FocusContentComponent,
        outlet: 'post'
      }
    ]
  }
];

八月-路.模特儿.：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthComponent } from '../layout/auth/auth.component';

const routes: Routes = [
  {
    path: '',
    component: AuthComponent
  },
  {
    path: 'auth',
    component: AuthComponent
  }
];

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

问题是当我使用http://localhost:4200/blog/mainpost时存在路由问题。控制台上说

无法匹配任何路由。URL段：“blog/mainpost”

blog.component.html是：

<!DOCTYPE html>
<html lang="en" dir="rtl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta
      name="author"
      content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
    />
    <meta name="generator" content="Hugo 0.88.1" />
    <title>Science Blog</title>
  </head>

  <body>
    <app-header></app-header>

    <main class="container">
      <app-focus-content></app-focus-content>

      <app-important-content></app-important-content>

      <div class="row g-5">
        <div class="col-md-8">
          <!-- <app-main-body> -->
          <router-outlet name="post"></router-outlet>
          <!-- </app-main-body> -->
        </div>

        <div class="col-md-4">
          <app-history-pannel></app-history-pannel>
        </div>
      </div>
    </main>
    <app-footer></app-footer>
  </body>
</html>

我怎样才能解决这个问题？

lazy-loading

angular

routes

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-14 15:05:20

在应用程序模块中

{
    path: 'blog',
    loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule)
}

这是路线/blog。

然后在你的博客模块里

  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: 'mainpost',
        component: FocusContentComponent,
        outlet: 'post'
      }
    ]
  }

这是/blog/blog和/blog/blog/mainpost的路线。

试着把孩子们移到上面的路线上

const blogRoutes: Routes = [
  {
    path: '',
    component: BlogComponent,
    children: [
      {
        path: 'mainpost',
        component: FocusContentComponent,
        outlet: 'post'
      }
    ]
  }
];

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71870242

复制

相似问题

问有多个路由模块时的路由选择
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有多个路由模块时的路由选择EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有多个路由模块时的路由选择
EN