electron 电子中的角布线

u0sqgete  于 2022-12-08  发布在  Electron
关注(0)|答案(3)|浏览(233)

我似乎有一些麻烦路由页面在我的角电子桌面应用程序。我设置路由的方式一样,你会在一个角应用程序,但没有工作。我使用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>
w46czmvw

w46czmvw1#

Angular中生成的根页面将为<base href="/">,这将在Electronic中产生问题。
将 * src/index.html * 中的<base href="/">更新为<base href="./">
检查文件名和路径是否正确!

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
}

希望这能起作用!

o0lyfsai

o0lyfsai2#

我遇到了同样的问题,在我的例子中,我有一个AngularJS应用程序,我正在重写为Angular
对我来说,解决方法是查看链接本身:

<!-- 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>
km0tfn4u

km0tfn4u3#

请确保您没有在应用程序中使用任何Cookie。请改用本地存储。这样应该可以解决此问题。

相关问题