Vue.JS

Question

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

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

我可以为此使用 abstract 模式 – 但结果页面是从以下内容生成的 url: /result/:userid 我需要的状态是 history为了能够从 URL 获取用户 ID（然后向服务器发出 post 请求）。

我也希望这个 URL 即使在完成表格后也可以访问，所以很遗憾，这里的摘要不是一个选项。

那么 – 是否可以同时使用这两种模式？刷新表单页面时刷新为index.html，然后用history方式渲染结果？

Answer 1

你不能这样做。它是 history 或 abstract 但不是两者。话虽如此，您可以做几件事。

方法 1：使用 `history` 模式，将步骤作为查询参数

因此，不要像 /step-1 或 /step-2 这样的路由，而是将 then 用作查询参数的一部分。所以你会有这样的路线：

索引路线：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 等。您将为此使用 abstract 模式。第二个应用程序将具有 /result/:userId 路由和 history 模式。

在此架构中，当用户在 step-5 上时，您将使用 HTML5 历史 API 更改路由器，而不是将新状态推送到路由器，然后导致强制页面刷新。此外，还有其他方法可以实现此目的。

Answer 2

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

Vue.JS - 'history' 和 'abstract' 路由器？

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

javascript

router

vuex

方法 1：使用 `history` 模式，将步骤作为查询参数

方法 2：使用具有高阶分量的 `abstract` 模式

方法 3：使用多页 SPA

Vue.JS - 'history' 和 'abstract' 路由器？

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

javascript

router

vue.js

vuex

方法 1：使用 history 模式，将步骤作为查询参数

方法 2：使用具有高阶分量的 abstract 模式

方法 3：使用多页 SPA

方法 1：使用 `history` 模式，将步骤作为查询参数

方法 2：使用具有高阶分量的 `abstract` 模式