Question

在我的有角电子桌面应用程序中，页面路由似乎有些麻烦。我已经像在角度应用程序中一样设置了路由，但是没有任何效果。我使用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>

Answer 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
}

希望这有效！。

电子中的角路由

1 个答案: