阻止用户导航到某个路由 url

Question

我的 SPA 顶部有一些主要的导航按钮。在内容区域下方，每个主要按钮都有一些按钮。在这些内容按钮上加载一个由 3 个视图组成的向导。这意味着用户首先导航到 view1，然后单击下一步按钮导航到 view2，然后在所有验证成功后导航到 view3。

现在，当我为我的所有 viewModel/views 设置一条路线时，用户可以直接导航到 view3，这将绕过我的验证。

也许你现在说，我不应该为这些视图创建路线，但我也无法导航到它们...

那么如何为 view2 和 view3 设置不应直接向用户公开但如果 view1 绕过验证我需要能够导航到它们的路由？

我找到了有关 durandaljs 并阻止导航到某个 url 的信息：

· 为路由器添加了一个guardRoute hook，用于根据路由允许、拒绝或重定向。

但我不知道如何在我自己的视图模型中使用 guardRoute...

Answer 1

不久前在Durandal's newsgroup 上有一个与此问题相关的问题。

简而言之，不要使用路由器功能，而是使用 ViewModel.activator() 在这些步骤之间切换。这样您就可以完全控制，根据您的向导 VM 的状态可以访问哪些步骤。

这是 Rob 从上面的帖子中得到的建议：

编曲，编曲，编曲。 :) 如果我正在构建一个向导，这里是 我会做什么：

1. 创建一个模块来管理当前页面并转换下一个/后退。为它创建一个视图，使用 compose 来引入 当前页面
2. 为向导的每个步骤创建一个模块，该模块具有唯一的字段和验证。
3. 为每个模块步骤创建一个视图。

仅此而已。像这样的：

更新示例：

现场版：http://dfiddle.github.io/dFiddle-1.2/#/view-composition/wizard

define(['durandal/viewModel', './step1', './step2', './step3'], function( viewModel, Step1, Step2, Step3 ) {

    var steps = [new Step1(), new Step2(), new Step3()];
    var step = ko.observable(0);
    var activeStep = viewModel.activator();
    var stepsLength = steps.length;

    var hasPrevious = ko.computed(function() {
        return step() > 0;
    });

    var hasNext = ko.computed(function() {
        return (step() < stepsLength - 1);
    });

    // Start with first step
    activeStep(steps[step()]);

    return {
        showCodeUrl: true,
        steps: steps,
        step: step,
        activeStep: activeStep,
        next: next,
        previous: previous,
        hasPrevious: hasPrevious,
        hasNext: hasNext
    };

    function next () {
        if ( step() < stepsLength ) {
            step(step() + 1);
            activeStep(steps[step()]);
        }
    }

    function previous () {
        if ( step() > 0 ) {
            step(step() - 1);
            activeStep(steps[step()]);
        }
    }

});

查看整个线程以获取更多信息。