在 ember 路由中有一个可选的前缀

Question

问题

应用程序必须具有可选的根前缀。前缀也有一个动态段。

例子

的内容

/posts/1 and /account/123/posts/1 has to load the same route and template.

其中 /account/123 是前缀。 123 是 前缀的动态段。

要求

所有 url 都必须可以访问有和没有前缀。
加载前缀路由时，所有单页转换都必须在前缀网址的上下文中。

/account/123/post/1 to /account/123/post/2
加载非前缀路由时，所有单页转换都必须在非前缀 url 的上下文中。

/post/1 to /post/2

约束

现有代码库的路由没有前缀 urls。
由于控制器、路由、模板已经存在在路由没有前缀中，解决方案必须重用现有代码。

预期的解决方案

所有进行 spa 转换的函数 必须查看 window.location 上下文 并转换到前缀或非前缀路径。这将包括 transitionTo、replaceWith、linkTo helper 等功能

Since the existing link-to helper,etc, will have route name as post.detail (non-prefix routes)
必须对现有控制器、路由、模板进行最少的代码更改。

现有路线示例

NewRouter.map(function() {
  this.route('posts', function() {
    this.route('detail',{path: "/:id"});

    this.route('comments', function() {
        this.route('detail',{path: "/:id"});
    });
  });

});

控制器、路由、模板已经存在 post、post.detail、评论、comment.detail。

Answer 1

不知道有没有正确答案。我在这里看到了几个选项，但在使用它们之前，请非常确定您确实需要 URL 中的帐户信息，并且它不能只存储在服务中。

我认为最好的选择是在两个地方都创建路由，然后复制所需的组件树。您将会有一些代码重复，这可能是一个可以接受的代价，因为您无需担心。

//posts/detail/index.hbs
`<PostDetail @id={{@model.id}} @accountId={{null}} />

//account/posts/detail/index.hbs
`<PostDetail @id={{@model.id}} @accountId={{@model.account}} />

您也可以尝试使用 engines 并两次安装相同的路线（每次 URL 一次），但引擎有其自身的一系列挑战。

Answer 2

Ember 路由器有一个属性 rootURL。如果您想从 http://emberjs.com/blog/ 提供博客应用程序，则需要指定 /blog/ 的根 URL。

这可以通过在 ENV 上配置 rootURL 属性来实现：

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'my-blog',
    environment: environment,
    rootURL: '/blog/',
    locationType: 'auto',
  };
}

但是，对于您的情况，此 rootURL 是动态的。 EmberRouter 有一个 init 函数，您可以使用它在运行时动态设置此值，然后通过动态检查加载的 URL 构建应用程序中的任何 url。

export default class Router extends EmberRouter {
  init(){
    super.init(...arguments);
    // trailing slash is required for rootURL
    let acctsSubUrl = window.location.pathname.match(/^\/accounts\/\d+\//);
    if(acctsSubUrl){
      this.rootURL = acctsSubUrl[0];
    }
  }
  location = config.locationType;
  rootURL = config.rootURL;
}

如果您这样做，请让 rootURL 的默认 ENV 值为 /。这应该可以解决您对 all 路由 url 存在时加载的动态前缀的要求。我针对 Ember 3.17 测试了它并且有效

在 ember 路由中有一个可选的前缀

Having an optional prefix in ember routes

ember.js

问题

例子

要求

约束

预期的解决方案

现有路线示例