Vue.JS -‘历史’和‘抽象’路由器？

Question

我正在创建一个VueJS应用程序，用户在其中填写一个5步表单。

这些步骤通过Vue路由器中的/step-1路由到/step-5。但是，当刷新页面时，我希望站点返回到索引页(/)。

为此，我可以使用abstract模式，但结果页是从以下url：/result/:userid生成的，其中需要状态为history，以便能够从URL获取用户I(然后向服务器发出post请求)。

我还希望这个URL即使在完成表单之后也可以访问，因此遗憾的是，这里的抽象并不是一个选项。

那么-这两种模式都可以使用吗？刷新窗体页时，将页面刷新为index.html，然后使用history模式呈现结果？

Answer 1

你不能这么做。它要么是历史，，要么是抽象，但不是两者兼而有之。说了这些之后，有几件事你可以做。

方法1:使用带有步骤的history模式作为查询参数

因此，与其使用像/step-1或/step-2这样的路由，不如将其用作查询params的一部分。所以你会有这样的路线：

• 索引路径：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历史API来更改路由器，然后强制页面刷新，而不是将新状态推送到路由器。此外，还有其他方法可以实现这一点。

Answer 2

您只需在本地javascript中进行重定向，就可以将其命名为window.location.href('yourHomePage.com')，它将进行完全刷新。