Vue는 이전 페이지의 데이터 메소드를 기록하기 위해 History를 사용합니다.

이 글에서는 이전 페이지의 데이터를 기록하기 위해 Vue의 History를 사용하는 방법에 대한 코드 소개를 주로 소개했습니다. 필요한 친구들은 참고할 수 있습니다.

Preface

이 글에서는 Vue가 이전 페이지의 데이터를 기록하기 위해 History를 사용한 Vue 관련 내용을 주로 소개합니다. 이를 통해 URL을 더욱 아름답게 만들 수 있습니다. 즉, '#' 문제에 대해서는 아래에서 자세히 설명하지 않겠습니다.

Requirements

목록 페이지 두 번째 페이지에서 상세 페이지로 진입 후 복귀 두 번째 페이지에 목록 페이지가 계속 표시되는 경우

목록 페이지 두 번째 페이지에서 상세 페이지로 진입하여 필터링을 합니다. 돌아올 때 목록 페이지의 조건이 여전히 존재합니다.

Technical Selection

이것을 통해 페이지 번호와 선택 조건을 결합하려면 vue-router 컴포넌트를 사용하세요.$router.push({path: path, query: query}) ; 매개변수로 URL에 저장되며, 이 방법은 위의 UI 디자인에서 가능하지만 목록 페이지에 탭 구성요소(페이징 구성요소가 공개됨)가 포함되어 있으면 푸시 요소의 영향을 받습니다(푸시가 새 페이지를 열기 때문). 페이지) 문제가 발생하여(PS: 저의 기술적인 능력 때문일 수도 있음) 구현되지 않았습니다.
History API(HTML5 지원)를 사용하고,history.replaceState 메소드를 통해 url에 페이지 번호를 매개변수로 저장하고, 선택 조건을 히스토리에 저장합니다(데이터가 어디에 저장되어 있는지는 확실하지 않습니다). ; 위치를 통해 해시 메소드를 통해 페이지 번호를 얻습니다. History.state 메소드를 통해 저장된 선택 조건을 얻습니다.
특정 구현--기술 선택 2

스위치

페이징 구성 요소가 회색조로 온라인 상태여야 하므로 스위치(오픈 경로)를 추가합니다. 문제가 있으면 조정을 위한 페이지가 하나뿐입니다. 코드는 다음과 같습니다.

`<script>`
`export` `default` `{`
`props: {`
`openroute: {`
`type: Boolean,`
`default``: () => (``true``)`
`}
`},`
`}`
`</script>`

페이지 번호와 선택 조건을 페이징 구성 요소에 저장하고 페이지 번호 가져오기

`<script>`
`export` `default` `{`
`methods: {`
`fetchData(page) {`
`/请求参数`
`let params =` `this``.params;`
`//请求页码`
`let newPage;`
`//openroute处理`
`if` `(``this``.openroute) {`
`//为url添上#page`
`if` `(page) {`
`history.replaceState(params.data, document.title,` `"#"` `+ page);`
`}` `else` `{`
`if` `(history.state) {`
`if` `(!history.state.key && location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {`
`if` `(JSON.stringify(history.state) !== JSON.stringify(params.data)) {` `//选择条件变更则请求第一页`
`history.replaceState(params.data, document.title,` `"#1"``);`
`}` `else` `{`
`history.replaceState(params.data, document.title,` `"#"` `+ location.hash.split(``"#"``)[1]);`
`}`
`}` `else` `{`
`history.replaceState(params.data, document.title,` `"#1"``);`
`}`
`}` `else` `{`
`if` `(location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {`
`history.replaceState(params.data, document.title,` `"#"` `+ location.hash.split(``"#"``)[1]);`
`}` `else` `{`
`history.replaceState(params.data, document.title,` `"#1"``);`
`}`
`}`
`}`
`//获取url后面的#page`
`if` `(location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {`
`newPage = Number(location.hash.split(``"#"``)[1]);`
`}` `else` `{`
`newPage = 1;`
`}`
`}` `else` 
`{`
`newPage = page;`
`}`
`//请求数据，获得结果，传递给列表页面`
`}`
`}`
`}`
`</script>`

목록 페이지에서 선택 조건 가져오기 #🎜 🎜#

프레임워크 때문일 수도 있습니다. 디자인 문제로 인해 데이터를 요청하기 전에는 Object.Assign을 통해 초기 변수를 대체할 수 없으므로 먼저 이렇게 처리합니다(멍청한 방법이 있다면, 해결책을 알려주세요. 감사합니다):

`<script>`
`export` `default` `{`
`data()
 {`eturn`
`{`
`form: {`
`aaa: (history.state && history.state.aaa) ? history.state.aaa :` `null``,`
`bbb: (history.state && history.state.bbb) ? history.state.bbb :` `null``,`
`ccc: (history.state && history.state.ccc) ? history.state.ccc :` `null`
`},`
`};`
`}`
`};`
`</script>`

해결되었습니다. 초기 변수는 이동할 필요가 없으며 다음 방법으로 달성할 수 있습니다.

`if` `(history.state) {`
`Object.assign(``this``.form, history.state)`
`if` `(``this``.form.key) {`
`delete` `this``.form.key`
`}`
`}`
`},`

#🎜 🎜#여기에 기록: 생성된 메소드가 페이징 구성요소의 감시 모니터링 후에 실행된 줄 알았으나 나중에 알고 보니 착각이었습니다. (기존에는 Object.asset(true, this.form, History를 통해 데이터 할당을 구현했기 때문입니다.) .state), 그러나 성공하지 못했습니다). 간단히 요약해 보겠습니다.

Object.sign(true, a, b);” 및 “Object.sign(a, b);” 차이점은 무엇입니까? # 결론: 전자: a를 변경하면 b에 영향을 주지 않고 후자: a를 변경하면 b에 영향을 줍니다

분석(이 문서에는 소스 코드 분석이 포함되어 있습니다( 답변: How to WebStorm 소스 코드에 관련이 있습니까? ), 좋습니다):

FAQ

history.replaceState 메소드를 사용해야 하는 이유는 변경된 내용을 푸시하지 않기 때문입니다. url을 스택에 기록하므로 앞뒤로 이동하는 단계 수가 증가하지 않습니다.

history.replaceState 메소드를 사용하면 저장 가능한 상태 크기가 640k로 작동할 수 없습니다

# 🎜🎜#

위 내용은 Vue는 이전 페이지의 데이터 메소드를 기록하기 위해 History를 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!