History 클래스를 사용하여 브라우저 기록을 처리하는 방법

Question

그래서 저는 다트와 웹 개발을 일반적으로 배우고 있습니다. 지금 저는 역사 API를 실험하고 있습니다. 내가 가진 :

import 'dart:html'; 

void main() { 
    ParagraphElement paragraph = querySelector('.parag'); 

    ButtonElement buttonOne = querySelector('.testaja'); 

    buttonOne.onClick.listen((_) { 
    window.history.pushState(null, 'test title', '/testdata/'); 
    window.history.forward(); 
    }); 

    ButtonElement buttonTwo = querySelector('.testlagi'); 

    buttonTwo.onClick.listen((_) { 
    window.history.back(); 
    }); 

    window.onPopState.listen((_) { 
    window.alert(window.location.pathname); 
    }); 
} 

내 결론은 우리가 브라우저의 뒤로 또는 앞으로 버튼 또는 window.history.forward() 또는 window.history.back()를 사용하여 클릭하면 onPopState는 트리거 점이다. 따라서 이것은 템플릿을 렌더링 한 다음 URL 변경을 기반으로 템플릿을 업데이트하지 않고 pushState을 사용하여 URL을 변경하는 것과 같습니다. 이것은 사실입니까?

편집 :

어쩌면 나는 분명치 않다. 내가 changeUrl을 클릭하여 input의 값을 얻을 수 있습니다

void main() { 
    InputElement input = querySelector('.input') 
    ButtonElement changeUrl = querySelector('.change-url'); 

    changeUrl.onClick.listen((event) { 
    window.history.pushState(null, 'test tile', input.value); 
    }); 

    Map urls = { 
    '/' : showRoot, 
    '/user/:id' : showUserProfile 
    }; 

    window.onPopState.listen((_) { 
    var location = window.location.pathname; 

    urls[location](); 
    }); 
} 

하고 changeUrl에 리스너를 추가하여, 나는 브라우저에 URL을 업데이트 할 pushState를 사용할 수의 나는 이런 식으로 뭔가를 가정 해 봅시다. 내가 예상하고있는 것은 pushState 일 때 window.onPopState이 트리거되고 실제로 콜백을 호출하지 않는다는 것입니다.

tldr는 제가 달성하기 위해 노력하고있어입니다 :

는 URL을 변경 청취 -> 현재의 URL을 얻을 ->지도에 저장된 핸들러를 호출 할 수있는 현재의 URL을 사용합니다. 접두사가 붙은 #을 사용하여 URL을 업데이트하는 경우 onHashChange을 사용하면 작동하지 않습니다.

Answer 1

이

window.location.hash = input.value; 

이러한 링크

<a href="#abc">abc</a> 

을에 클릭처럼이가 PopState 및 HashChange 이벤트

트리거를 사용하여 해시를 설정 편집 원래 내가 you'r을 실현하려 노력하고 무엇 면밀한 관찰을 할 시간이 없어

..
하지만 난 당신이 'window.onHashChange'평범한 링크도 작동이 방법에 대한 이벤트 처리기를 추가해야한다고 생각 탐색을 위해 브라우저 기록을 수정하는 onclick-handler가있는 버튼뿐만 아니라