Angular4 새로 고침 페이지가 URL의 페이지를 반복합니다.

저는 Angular newb이며 간단한 하나의 호출기를 만듭니다. 빈 URL이 대시 보드 구성 요소로 리디렉션되도록 라우터 설정이 있습니다. 따라서 localhost:4200은 자동으로 localhost:4200/dashboard Perfect로 라우팅됩니다.Angular4 새로 고침 페이지가 URL의 페이지를 반복합니다.

그러나 새로 고침 버튼을 클릭하면 URL에 다른 대시 보드가 추가되고 이상하게도 페이지가 실제로 잘로드됩니다. localhost:4200/dashboard/dashboard

가 나는 URL에 다른 대시 보드를 추가하고 지금은

localhost:4200/dashboard/dashboard/dashboard

문제의 존재가, 왜 내 URL에 '/ 대시 보드'를 계속 추가 않습니다로드되지 않습니다 다시 새로 고침 충돌하는 경우 모든 페이지 새로 고침? 여기

여기

import { Routes, RouterModule } from '@angular/router'; 

import { DashboardComponent } from '../_feature/iacuc/dashboard.component'; 

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'dashboard', pathMatch: 'prefix' }, 
    { path: 'dashboard', component: DashboardComponent } 

    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
]; 

export const Routing = RouterModule.forRoot(appRoutes);

코드의 나머지는 당신이 소개 예에서 볼 보일러 내 index.html을

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/" > 
    <title>Angular 2 JWT Authentication Example</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- bootstrap css --> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 

    <!-- application css --> 
    <link href="app.css" rel="stylesheet" /> 

    <!-- polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 

    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function (err) { console.error(err); }); 
    </script> 
</head> 
<body> 
    <app>Loading...</app> 
</body> 
</html>

입니다 routing.module.ts,하지만 난 더를 표시 할 수 있습니다 도움이된다면 코드를 작성하십시오.

감사합니다.

출처

2017-10-19 user441058

'pathMatch : 'pathMatch'에 prefix'' 변화 :'키워드는 문자 그대로 '접두사'이다 –

을 full'' 하하 – Carsten

'full'도 작동하지 않습니다. – user441058

pathMatch: 'full' 대신 여기 읽을 pathMatch: 'prefix'

의 사용이 필요 : https://angular.io/api/router/Routes

출처

2017-10-19 06:26:05 micronyks

제안한대로 pathMatch : 'full'로 변경하는 것 외에도 경로를 사용하여 구성 요소 이름을 사용하는 경로를 변경해야합니다. 해당 문자열을 루트 url에 추가합니다. 올바른 경로 : {path : '', 구성 요소 : DashboardComponent, 경로 일치 : 'full'} – user441058

Angular4 새로 고침 페이지가 URL의 페이지를 반복합니다.

답변

관련 문제