Vue.JS - '역사' 및 '추상' 라우터 둘 다?

Vue.JS - '역사' 및 '추상' 라우터 둘 다?

사용자가 5단계 양식을 작성하는 VueJS 앱을 만들고 있다.

이 단계는 다음과 같이 라우팅된다./step-1을 통해/step-5Vue 라우터에.그러나 사이트를 인덱스 페이지로 되돌렸으면 한다(/페이지를 새로 고칠 때.

나는 할 수 있다.abstract이에 대한 모드 – 그러나 결과 페이지는 다음 URL에서 생성된다./result/:userid나는 국가가 되어야 한다.historyURL에서 userid를 가져올 수 있도록(그리고 서버에 사후 요청을 한다).

나도 이 URL이 양식을 마친 후에도 접속이 가능했으면 좋겠는데, 아쉽게도 여기의 추상화는 선택사항이 아니다.

그렇다면 – 두 모드를 모두 사용할 수 있는가?페이지를 새로 고침index.html양식 페이지를 새로 고친 후 사용할 때history결과를 렌더링하는 모드?

이러면 안 돼.그것은 역사적이거나 추상적이거나 둘 다 아니다.이 말을 하고 나니, 네가 할 수 있는 일이 몇 가지 있다.

접근법 1: 사용history쿼리 매개 변수로 스텝을 사용하는 모드

그래서 다음과 같은 루트를 갖는 대신에/step-1또는/step-2, 그런 다음 쿼리 매개 변수의 일부로 사용하십시오.따라서 다음과 같은 경로를 확보하십시오.

• 인덱스 경로:example.com/?step=1,example.com/?step=2
• 결과 경로:example.com/result/:userId

접근법 2: 사용abstract고차 구성 요소의 모드

여기서, 당신은 추상적인 라우터를 가지게 될 것이지만 그것은 상태 라우터 역할만 할 뿐이고 브라우저 URL 조작에는 도움이 되지 않을 것이다.

다음과 같은 고차 구성 요소 구축AppComponent경로를 결정할 수 있는 자신만의 정규 표현식이 있는 곳다음과 같이 보일 것이다.

// Should match route /result/:userId
const IS_RESULT = new RegExp('/result/(\\d+)$');

// User RegExp groups
const IS_STEP = new RegExp('/step-(\\d+)$');

export default class AppComponent extends Vue {

    // Use Vue.js created hook
    created() {
        const path = window.location.pathname;

        // Top level routing of the application
        if (IS_STEP.test(path)) {
            // Do something. You are in step-1/step-2/etc.
        } if (IS_RESULT.test(path)) {
            // Do something. You are in /result/:userId

            // Get userId
            const groups = IS_RESULT.exec(path);
            const userId = groups[1];
        } else {
            // Goto Error page
            throw new Error('Unknown route');
        }
    }

}

접근 방식 3: 다중 페이지 SPA 사용

여기서, 당신은 두 개의 단일 페이지 응용프로그램을 만들 것이다.첫 번째 앱은 루트가 있을 것이다./step-1,/step-2, 등등. 당신은 이것을 위해 추상적인 모드를 사용할 것이다.두 번째 신청서는/result/:userId기록 모드를 사용하여 경로 지정

이 아키텍처에서 사용자가 켜져 있을 때step-5라우터에 새 상태를 푸시하는 대신 HTML5 history API를 사용하여 라우터를 변경한 다음 강제 페이지 새로 고침을 발생시키십시오.또한, 당신이 이것을 성취하는 다른 방법들도 있다.

window.location.href('yourHomePage.com'이라고 부르는 네이티브 자바스크립트로 간단히 리디렉션하면 완전히 새로워진다.

참조URL: https://stackoverflow.com/questions/55004775/vue-js-both-history-and-abstract-router