电子角度路由

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

角中生成的根页将是<base href="/">，这将在电子中产生问题。

在src/index.html中将<base href="/">更新为<base href="./">

在您的main.js win.loadUrl中检查fileName和路径是否正确！

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
}

希望这能成功！

Answer 2

我只是有同样的问题，在我的例子中，我有一个AngularJS应用程序，我正在重写为角

对我来说，解决这一问题的办法是审查这些联系本身：

<!-- These DON'T work -->
<a href="./home">Home</a>
<a href="#home">Home</a>
<a [routerLink]="./home">Home</a>

<!-- These ones do-->
<a routerLink="home">Home</a>
<a [routerLink]="'home'">Home</a>

Answer 3

请确保您在应用程序中没有使用任何cookie。相反，请使用本地存储。这应该能解决这个问题。