客户端JavaScript应用 - 无哈希标记的URL路由

Question

我正在使用最新版本的Ember.js开发一款纯客户端应用程序。有一个单独的PHP页面来构建脚本、CSS、模板文件等，并将它们全部提供给index.php。我使用了htaccess指令，以便将所有请求重写为/index.php。据我所知，PHP只是方便地打包JavaScript。

当前，浏览器中的路由看起来像这样，并且可以正常工作。

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

然而，我希望它们看起来像这样-这并不起作用。

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

第二个选项仍然使用完全相同的客户端代码，但它总是命中索引路由处理程序。我曾经见过客户端应用程序在这方面做到了 - 我错过了什么？我需要在 PHP 端拥有匹配的路由处理程序吗？

编辑：我正在寻找如何解决此问题的具体答案。网络上充斥着“哦 - 你只需要这样做”的信息，让其他人摸不着头脑。

- Jarrod Nettles

Answer 1

在Ember.js（版本1.0.0rc3）中，可以通过使用Ember.js位置API来实现此目标：

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

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

为了举一个具体的例子，这里有一个基本的Apache .htaccess文件，将流量重定向到位于index.html中的Ember应用程序：

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

正如Alex White所指出的，Apache 2.2.16及以上版本支持更简单的配置方式来将流量重定向到单个目标：

FallbackResource /index.html

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

务必彻底测试应用程序路由。一个常见的错误是Uncaught SyntaxError: Unexpected token <，这是由于使用相对链接到CSS和JS文件造成的。在它们前面加上/标记使它们变为绝对路径。

此功能不支持Internet Explorer＜10。

- Chris Laskey

---

在Rails路由器中是否有一种方法也可以这样做？ - mehulkar

你好！我已经完成了这个任务，并且在本地主机上没有出现错误，但是刷新仍然无法正常工作。我不得不添加一行代码以允许与我的couchdb实例进行通信： RewriteCond %{REQUEST_FILENAME} !^_couch(.*)$ 我正在使用Chrome进行测试，你有什么想法吗？ - blaineh

如果浏览器不支持历史记录，location: 'auto' 可能是旧浏览器的解决方案... 它将在 URL 中使用哈希。 - Zoltan

有没有想法如何保留查询字符串...例如：/ about？test = 123＆hi = hello。因为某种原因，我无法从URL中获取查询字符串，并且我确定这与更改htaccess中的某些内容有关。 - Matt

通过查询字符串解决了这个问题：RewriteRule ^(.*)$ index.php [QSA,L] - Matt

在 Ember 1.13.13 上完美运行。正是我所寻找的，谢谢！ - rog

Answer 2

比 RewriteRule 更好的方法是，您可以在 Apache 2.2.16+ 上使用以下方法：

FallbackResource /index.html

在您的Apache配置中加入以下内容，以便RewriteRule不需要为每个请求运行。这将确保您Ember应用程序中的每个路由都落在index.html文件上。

- Alex White

Answer 3

@Pascal：他所指的不是实际的页面刷新，而是使用Ember的history (location: 'history')。

回答你的问题，你需要配置你的.htaccess文件以向JavaScript提供通常的内容。一旦你的URL被配置为加载应用程序，然后Ember将像往常一样从URL中处理所有事情。

- Wildhoney

---

你能指出一个如何配置.htaccess的例子吗？ - Jarrod Nettles

Answer 4

是的，你在服务器端需要有匹配的路由。不使用哈希标签也会强制重新加载页面，降低速度，并且可能导致比必要的刷新更多的情况发生。

此外，你还需要通过服务器传递状态，或者使用浏览器本地存储的某种变体。

- Pascal Belloncle