电子中的角路由答案

【问题标题】：Angular routing in electron电子中的角路由
【发布时间】：2020-11-30 01:04:20
【问题描述】：

在我的 Angular 电子桌面应用程序中，我似乎在路由页面时遇到了一些问题。我已经以与在 Angular 应用程序中相同的方式设置路由，但没有任何效果。我使用 routerlink="/home" 作为 html 文件中的路由，并且我已经在 app.routing.module 中设置了组件的路径。我有一个 sidenav 和一个工具栏，应该路由到相同的页面，以及一个登录页面，应该在应用程序启动时加载，但没有任何反应。

const routes: Routes = [
  {path: 'Insurnace',component:InsuranceProviderComponent},
  {path: '**',component: PageNotFoundComponent},
  {path:'profile',component:ProfileComponent},
  // // {path: '',redirectTo: '/home',pathMatch: 'full'},
  // {path: '**',redirectTo: '/home',pathMatch: 'full'},
  {path:'login',component:LoginComponent},
  {path:'register',component:RegisterComponent},
  {path:'insurance',component:InsuranceProviderComponent},
  {path:'farm',component:FarmComponent}
];
the routing paths 

<mat-toolbar color="primary" class="tool">
  <mat-toolbar-row>
    <button mat-icon-button>
      <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
    </button>
    <h1 id="name">AgriLog</h1>
    <span class="menu-spacer"></span>
    <div>
      <a mat-button [routerLink]="'/home'"><span class="material-icons">
        home_work
        </span>Home</a>
      <a mat-button [routerLink]="'/about'"><span class="material-icons">
        info
        </span>About</a>
      <a mat-button [routerLink]="'/profile'"><span class="material-icons">
        account_circle
        </span>Profile</a>
      <!-- <a mat-button [routerLink]="'/farm'"><span class="material-icons">
        agriculture
        </span>Farm</a> -->
      <a mat-button id="reglog" [routerLink]="'/register'"><span class="material-icons">
        person_add
        </span>Register</a>
      <a mat-button id="reglog" [routerLink]="'/login'"><span class="material-icons">
        login
        </span>Login</a>
      <a mat-button id="reglog" [routerLink]="'/'"><span class="material-icons">
        power_settings_new
        </span>Logout</a>
    </div>
  </mat-toolbar-row>
</mat-toolbar>


<mat-sidenav-container class="side" layout="vertical" layout-fill flex>
  <mat-sidenav #sidenav>
    <mat-nav-list>
      <br>
      <br>
      <br>
      <a mat-list-item [routerLink]="'./farm'"><span class="material-icons">
        home_work
        </span>Home</a>
      <a mat-list-item [routerLink]="'/about'"><span class="material-icons">
        info
        </span>About</a>
      <a mat-list-item [routerLink]="'./profile'"><span class="material-icons">
        account_circle
        </span>Profile</a>
      <!-- <a mat-list-item [routerLink]="'/farm'"><span class="material-icons">
        agriculture
        </span>Farms</a> -->
      <a mat-list-item [routerLink]="'/'"><span class="material-icons">
        power_settings_new
        </span>Logout</a>
      <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div style="height: 100vh;">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

【问题讨论】：

没有任何代码很难帮你。请提供代码的相关部分。如有疑问，请参阅How to Ask 部分。
我已经用相关代码更新了它

标签： angular electron

【解决方案1】：

在 Angular 中生成的根页面将是 <base href="/">，这会在 Electron 中产生问题。

在 src/index.html

中将 <base href="/"> 更新为 <base href="./">

在你的 main.js win.loadUrl 检查文件名和路径是否正确！。

function createWindow () {
// Create the browser window.
win = new BrowserWindow({
  width: 600, 
  height: 600,
  backgroundColor: '#ffffff',
  icon: `file://${__dirname}/dist/assets/logo.png`
 })


   win.loadURL(`file://${__dirname}/dist/index.html`)   <== HERE
}

希望这行得通！。

【讨论】：