Vue.JS-“历史”路由器和“抽象”路由器？

Question

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

这些步骤在Vue路由器中通过/step-1路由到/step-5。但是，我希望网站在刷新页面时返回到索引页面（/）。

我可以为此使用abstract模式-但是结果页面是根据以下网址生成的：/result/:userid，我需要将状态设为history，以便能够从URL获取用户ID（然后向服务器发出发布请求）。

我还希望即使在完成表单后也可以访问此URL，因此不幸的是这里不是抽象的选择。

那么–是否可以同时使用两种模式？刷新表单页面时将页面刷新为index.html，但是使用history模式呈现结果吗？

Answer 1

您不能这样做。它是历史记录或摘要，但不能两者兼而有之。话虽如此，您可以做几件事。

方法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历史记录API更改路由器，然后强制页面刷新，而不是将新状态推送到路由器。另外，还有其他方法可以实现这一目标。

Answer 2

您可以在本机javascript中直接进行重定向，将其称为window.location.href（'yourHomePage.com'），它将完全刷新。