Vue.JS - Both 'history' and 'abstract' router?

Question

I am creating a VueJS app in which the user fills out a 5-step form.

These steps are routed to /step-1 through /step-5 in the Vue Router. However, I would like the site to return to the index page ( / ) when refreshing the page.

I could use abstract mode for this – but the result page is generated from the following url: /result/:userid in which I need the state to be history in order to be able to get the userid from the URL (and then do a post request to the server).

I also want this URL to be accessible even after finishing the form, so abstract here is not an option unfortunately.

So – is it possible to use both modes? Refresh the page to index.html when refreshing the form-pages, but then use history mode to render the result?

Answer 1

You cannot do this. It is either history or abstract but not both. Having said this, there are a couple of things you can do.

Approach 1: Use history mode with steps as query params

So instead of having routes like /step-1 or /step-2 , use then as part of query params. So you will have routes like:

• Index route: example.com/?step=1 , example.com/?step=2
• Result route: example.com/result/:userId

Approach 2: Use abstract mode with higher order component

Here, you will have a router with abstract but it will only serve as a state router and won't help with any browser URL manipulation.

Build a higher order component like AppComponent where you will have your own regular expressions to determine the route. It would look like:

// 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');
        }
    }

}

Approach 3: Use Multi-page SPA

Here, you will create two single page application. The first app will have routes /step-1 , /step-2 , etc. You will use abstract mode for this. The second application will have /result/:userId route with history mode.

In this architecture, when a user is on step-5 , instead of pushing a new state to the router, you will use HTML5 history API to change the router and then cause a forced page refresh. Also, there are other ways you achieve this.

Answer 2

您可以简单地在原生 javascript 中进行重定向，您将其命名为 window.location.href('yourHomePage.com')，它会进行完全刷新。