단일 페이지 응용 프로그램의 URL 관리

일반적으로 단일 페이지 응용 프로그램 (스파)에서 하나의 페이지에 sidenav 메뉴가있는 곳이 있습니다. 이 메뉴에는 여러 앵커 태그가 있습니다.
앵커 태그의 url은 angular/react/sammy js 라우터에 의해 처리되고 메인 div는 컨트롤러에서 반환 된 HTML을 기반으로 새로 고쳐집니다.
아주 간단하고 맞습니까?
그러나 사용자가 브라우저 주소 표시 줄을 통해 앵커 태그 URL에 직접 액세스하는 시나리오를 생각해보십시오. 반환 된 HTML 세그먼트 만 전체 페이지에로드됩니다.
이런 종류의 상황을 처리 할 수있는 방법이 있습니까? 나는 사용자가 URL에 직접 액세스 할 때마다 그/그녀가 적절하게 주소가 지정 될 수 있다는 것을 의미합니까?단일 페이지 응용 프로그램의 URL 관리

편집 : 나는이 문제에 대해 너무 분명하지 않을 수 있습니다. 내가 조금 정교한 보자

내 페이지 URL이 가정 :
이 페이지는 네비게이션 메뉴 클래스 명이 사업부 섹션 "주요 컨테이너"
사용자입니다 가지고 abc.com/dashboard 탐색 메뉴에서 링크를 클릭하면 라우터가 url을 abc.com/view/listofXYZ로 이동했습니다. 따라서 "main-container"div에 url의 응답이로드됩니다. abc.com/view/listofXYZ
이제 다른 사용자는 abc.com/view/listofXYZ URL 및 hit eneter로 직접 이동하십시오. 그런 다음 페이지에는 url의 응답 HTML 만 포함됩니다. 즉 모든 탐색 메뉴와 div가 사라졌습니다.

내 질문은 그래서이 두 작품 아니라, 우리는 약간의 설계 방식을 구현할 수있다?

출처

2017-01-07 Abhinab Kanrar

을 위해 그렇게, 요구 사항은 반환 된 UI 또는 요청 UI와 전체 UI를 보여주는 것입니다? – Jai

분명히 리턴 된 html을 가진 전체 ui –

리턴 된 html 세그먼트 만 전체 페이지에로드됩니다 ._ 어떻게 이것이 가능합니까? – Jai

sammy js router 대신 ui-router을 사용하십시오. 당연히 나는 그것에 대해 모른다. 그러나 angular-ui-router에서 $stateProvider의 ui-router을 사용하여 상태 및 URL을 정의합니다. 심지어 사용자가 브라우저에 직접 URL을 입력 한 경우에도 상태에 정의 된 URL이 일치하는 경우에만 올바르게 주소가 지정됩니다.

https://github.com/angular-ui/ui-router/tree/legacy 자세한 내용은 여기를 참조하십시오. 여기

는

$stateProvider.state('',{ 
    url: '/', 
    tempate: 'path/to/.html', 
    controller: 'controllerToHandle' 
}) 
.state('home', { 
    url: '/home', 
    template: 'path/to/home.html', 
    controller: 'HmeCtrl' 
}) 
.state('home.list',{ //defines child states with dot 
    url: '/list', //shows url as home/list because it is a child state 
    template: 'path/to/list.html' 
})

사용 $urlRouterProvider.otherwise('/') 어떤 경로 은 마찬가지로, 사용자가 home에서 예를 들어 list 에 통과 할 수 일치하지 않는 경우, www.my-app.com는 호스트 이름, 예입니다. URL이 /home/list 인 경우 www.my-app.com/home/list을 입력하면 home/list 페이지로 이동하고 잘못된 URL을 입력하면 otherwise 방법으로 인해 home 페이지로 이동합니다.이런 일이 반응/새미 라우터에있는 경우

는, 그래서 더 나은 솔루션

출처

2017-01-07 09:27:00

그러나 제안 된 링크 흥미로운 소리. –

제안 된 링크를 살펴보십시오. 아주 쉽게 구현하고 완벽하게 내 필요에 적합합니다. 제안 해 주셔서 감사합니다. –

리액터 라우터를 사용하면 사용자가 새 URL을 제공하면 onEnter 이벤트를 처리 할 수 있습니다. 할 수 있습니다. :

const onEnter = (e) => { 
    console.log(e.location.pathname); 
} 

/* ... */ 

<Route path="/" onEnter={onEnter} component={MyComponent} />

이 샘플은 콘솔에 새로운 URL을 기록해야합니다. 적절한 돌연변이를 만들고자 할 때 더 멀리 해석 할 수 있습니다.

출처

2017-01-07 09:23:02

단일 페이지 응용 프로그램의 URL 관리

답변

관련 문제