客户端 Javascript 应用程序 - 没有哈希标签的 url 路由

问题描述

我正在使用最新版本的 Ember.js 开发一个仅限客户端的新应用.有一个单独的 PHP 页面可以构建脚本、css、模板文件等，并将它们全部传送到 index.php.我正在使用 htaccess 指令，以便将所有请求重写到/index.php.就我而言，PHP 只是为了方便地打包 Javascript.

I'm working on a new client-side only app with the latest version of Ember.js. There is a single PHP page which builds the scripts, css, template files, etc. and delivers it all into index.php. I'm using an htaccess directive so that all requests are rewritten to /index.php. The PHP is only there to conveniently package the Javascript, as far as I'm concerned.

目前，浏览器中的路由看起来像这样并且工作正常.

Currently, routes in the browser look like this and work just fine.

/#/about
/#/favorites
/#/etc
/#/posts/5/edit

但是，我希望它们看起来像这样 - 这不能正常工作.

However, I would like them to look like this - which do not work just fine.

/about
/favorites
/etc
/posts/5/edit

第二个选项仍然提供完全相同的客户端代码 - 但它总是命中索引路由处理程序.我以前见过客户端应用程序实现了这一点 - 我错过了什么?我需要在 PHP 端有匹配的路由处理程序吗?

The exact same client-code is still delivered with the second option - but it always hits the index route handler. I've seen client-side apps pull this off before - what am I missing? Do I need to have matching route handlers on the PHP side?

我正在寻找如何解决这个问题的具体答案.网络上充斥着哦 - 你只是这样做"的信息，让其他人都摸不着头脑.

I'm looking for a specific answer of how to approach this. The web is full of "oh - you just do this" information that leaves everybody else scratching their heads.

推荐答案

在 Ember.js(版本 1.0.0rc3)中，这可以通过使用 Ember.js 位置 API:

In Ember.js (version 1.0.0rc3) this can be accomplished by using the Ember.js location API:

App.Router.reopen({
  location: 'history'
});

然后设置 Web 服务器以将流量重定向到 Ember 应用程序.

And then setting the web server to redirect traffic to the Ember application.

这里给出一个具体的例子是一个基本的 Apache .htaccess 文件，它将流量重定向到位于 index.html 的 Ember 应用程序:

To give a concrete example here is a basic Apache .htaccess file redirecting traffic to the Ember application located in index.html:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html#$1 [L]

正如 Alex White 指出的那样，Apache 2.2.16 及更高版本支持将流量重定向到单个目标的更简单配置:

As Alex White points out Apache 2.2.16 and above supports a simpler configuration for redirecting traffic to a single target:

FallbackResource /index.html

FallbackResource 是 的一部分mod_dir 模块，需要设置 AllowOverride Indexes.

The FallbackResource is part of the mod_dir module and requires AllowOverride Indexes to be set.

确保彻底测试应用程序路由.一个常见的错误是 Uncaught SyntaxError: Unexpected token <，这是由使用 CSS 和 JS 文件的相对链接引起的.在它们前面加上 / 标记，使它们成为绝对的.

Make sure to test the application routes thoroughly. One common error is Uncaught SyntaxError: Unexpected token <, which is caused by using relative links to CSS and JS files. Prepend them with a / mark to make them absolute.

此功能在 Internet Explorer 中不受支持.

This functionality is not supported in Internet Explorer <10.

这篇关于客户端 Javascript 应用程序 - 没有哈希标签的 url 路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！