Question

我定义了以下路线：

SettingsApp.Router.map(function () {
    ....
    this.resource('profile', function () {
        this.route('user'),
        this.route('company')
    });

});

SettingsApp.ProfileRoute = Ember.Route.extend({
    redirect: function () {
        this.transitionTo('profile.user');
    },
    model: function () {
        return Ember.A([
            Ember.Object.create({title:"User", link:"#/profile/user"}),
            Ember.Object.create({title:"Company", link:"#/profile/company"})
        ]);
    }
})

#/profile按预期重定向到#/profile/user 但问题是#/profile/company 还重定向到{{1 }}。每当我访问该资源下面的任何URL时，似乎都会遵循资源重定向。

这是为什么？如何重定向仅顶级#/profile/user？

Answer 1

您可以将redirect()移至profile资源index路由ProfileIndexRoute，只有当您浏览到#/profile时才会触发该路由允许您无问题地访问#/profile/user和#/profile/company：

SettingsApp.Router.map(function () {
    this.resource('profile', function () {
        this.route('user');
        this.route('company');
    });

});

SettingsApp.ProfileRoute = Ember.Route.extend({
    //redirect: function () {
    //    this.transitionTo('profile.user');
    //},
    model: function () {
        return Ember.A([
            Ember.Object.create({title:"User", link:"#/profile/user"}),
            Ember.Object.create({title:"Company", link:"#/profile/company"})
        ]);
    }
});


SettingsApp.ProfileIndexRoute = Ember.Route.extend({
  redirect: function () {
        this.transitionTo('profile.user');
    },
});

Example JSBin

提示：在LOG_TRANSITIONS: true上设置Application，以显示通过路由器访问的路由。这对于调试此类问题非常有用。

SettingsApp = Ember.Application.create({
  LOG_TRANSITIONS: true
});

Answer 2

redirect中的ProfileRoute是一个硬重定向，这意味着无论您拥有什么嵌套路由/资源，它都会始终重定向到profile.user。要有不同的行为，您应该删除redirect挂钩，并提供父模板或导航到您的子资源的链接，例如

{{#linkTo profile.user}}User{{/linkTo}}
{{#linkTo profile.company}}Company{{/linkTo}}

这将生成以下HTML标记：

<a href="/user">User</a>
<a href="/company">Company</a>

如果您想在路线转换中传递模型，您可以在模板设置中执行以下操作：

{{#linkTo profile.user user}}User{{/linkTo}}
{{#linkTo profile.company company}}Company{{/linkTo}}

如果您传递模型，则需要相应地更改路由器地图：

SettingsApp.Router.map(function () {
  ....
  this.resource('profile', function () {
    this.route('user', { path: "/user/:user_id" }),
    this.route('company', { path: "/company/:company_id" })
  });
});

这将生成以下HTML标记：

<a href="/profile/user/1">User</a>
<a href="/profile/company/1">Company</a>

最后，如果您重定向到profile.user或profile.company，您还需要此路线的模板。

希望它有所帮助。

访问顶级资源时转换到另一个路由，但访问嵌套路由时不转换

2 个答案: