Question

我已将电子配置添加到现有的SPA应用程序中。当我单击导航栏中的链接时，出现以下错误：

 /dist/about net::ERR_FILE_NOT_FOUND

我知道目录中没有这样的文件，但我现在一直在寻找如何处理路由的问题。

目前我只发现了只有一页的样板项目，我开始认为Electron无法进行路由（如果没有，请告诉我）。

随时查看我的source code。我目前正在使用main.js文件中的电子文档样板文件。

非常感谢任何帮助！

Answer 1

将导航栏中的href更改为：#<componentName>解决了问题。示例：

<li class="nav-item waves-light" mdbRippleRadius>
                <a class="nav-link" href="#about">About</a>
</li>

Answer 2

创建一个AppRoutingModule，您可以将其导入到 App.Module.ts 中的导入数组中，然后导入到 app.routing.module.ts （其中@ angular / cli询问您是否要在安装时包括在内）创建类似以下内容的

const routes: Routes = [
  { path: 'pageOne', component: PageOneComponent},
  { path: 'pageTwo', component: PageTwoComponent},
  { path: '', redirectTo: '/pageOne', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent}
];

因此，第一个和第二个“路径”指向您要路由到的页面/组件，而第三个是应用程序的默认“着陆页”，最后一个是无效路径时显示的内容被访问。不用说，这些组件（包括未找到页面的组件）必须存在并导入到 app.routing.module.ts 中。

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

还要在路由数组后添加上面的代码。要访问这些路线中的任何一条，只需使用锚点/按钮，例如<a routerLink="/pageOne">Go To Page One</a>

如何使用Angular和Electron处理路由

2 个答案: