设置 rootURL 导致页面刷新时出现 404 错误答案

【问题标题】：setting rootURL causing 404 error on page refresh设置 rootURL 导致页面刷新时出现 404 错误
【发布时间】：2017-07-04 09:43:15
【问题描述】：

如果我将语言设置为 rootURL 这可行，我可以转到任何路由/子路由，并且当前语言将出现在 url 中，但是在页面刷新浏览器正在尝试从该语言文件夹中获取应用程序有什么想法吗？ :/ 我使用的是 Ember 1.11。

// router.coffee

`import Ember from 'ember';`
`import config from './config/environment';`

Router = Ember.Router.extend
  location: config.locationType
  rootURL: '/' + localStorage.getItem('locale') + '/'

// config/environment.js

module.exports = function(environment) {
  var ENV = {
    locationType: 'history',
    baseURL: '/'
...

【问题讨论】：

标签： javascript ember.js routes router

【解决方案1】：

您不应为此目的使用rootURL。相反，创建一个将成为所有其他路由的父级的路由：

//../app/router.js

import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend(
    {
        location: config.locationType
    }
);
Router.map(
    function ()
    {
        this.route(
            'lang', { path: '/:lang' }, function ()
            {
                this.route('index', { path: '/' });
                this.route('404', { path: '/*wildcard' });
                this.route('your-route-name');
            }
        );
    }
);
export default Router;

您可以使用lang 路由的afterModel 方法来确定所需的语言环境：

//../app/routes/lang.js
import config from '../config/environment';
export default Ember.Route.extend(
    {
        afterModel: function (params)
        {
            var allowedLocales = config.i18n.allowedLocales;
            var defaultLocale = config.i18n.defaultLocale;
            this.set(
                'i18n.locale',
                params && params.lang && allowedLocales.indexOf(params.lang) > -1 ? params.lang : defaultLocale
            );
        }
    }
);

在index 路由中，您需要从浏览器的设置中检测用户的区域设置或使用默认设置：

//../app/routes/index.js
import config from '../config/environment';
export default Ember.Route.extend(
    {
        beforeModel: function ()
        {
            var allowedLanguages = config.i18n.allowedLocales;
            var language = config.i18n.defaultLocale;
            if (navigator.languages) {
                for (let lang of navigator.languages) {
                    if (allowedLanguages.indexOf(lang) > -1) {
                        language = lang;
                        break;
                    }
                }
            } else {
                if (navigator.language) {
                    language = navigator.language;
                } else {
                    if (navigator.userLanguage) {
                        language = navigator.userLanguage;
                    }
                }
            }
            this.transitionTo('lang.index', { lang: language });
        }
    }
);

顺便说一句，您的 Ember 版本已经很旧了。您可能希望将其升级到 1.13（1.13.x 不应该破坏您的应用程序，2.x 可以）。

【讨论】：

谢谢我现在正在做这样的事情，但需要进行大量更改，我需要更改所有链接到帮助器，然后是 transitionTo、transitionToRoute、modelFor，毕竟我需要确保在每条路线中正确更新 url，因为如果我将语言从 your-route-name 的页面更改为俄语（这将刷新页面），例如刷新后我仍然会在 url 中有en.your-route-name：/跨度>
this.transitionTo('lang.index', { lang: language }); 你能否解释一下为什么这条线不能只是这样的字符串我有无限循环只有在我这样做时才有效this.transitionTo('lang.index', language );
@varto 我从我在 2015 年 7 月 19 日发表的博文中复制了该代码。那时它起作用了。不幸的是，现在无法检查。可能api被改变了。根据最新的 ember 文档，this.transitionTo('lang.index', language ); 是正确的。
@varto 我明白了。问题是您需要替换 url 中的语言环境，而不仅仅是重新加载，因为 url 控制语言环境。最简单的方法是替换 window.location.href 中的语言环境并将用户重定向到新的 url。
@varto 我建议获取当前 url（window.location.href 包含完整 url），使用字符串的 replace 方法查找和替换语言环境，然后重定向：window.location.href = newURL。这种方法适用于任何页面。