Polymer 中的 PageJs 漂亮 URL 不起作用

Question

我在我的应用程序中使用漂亮的 Urls 时遇到了一些困难，该应用程序是 Polymer 100% 应用程序并由 Firebase 提供支持。它基于 Polymer Starter Kit 1.2.0.

我想访问路线 localhost:5000/user/edit。如果我在主页 (localhost:5000) 中单击带有 href="/user/edit" 的按钮，它工作正常。但是，如果我刷新页面，如果我直接进入 "/user/edit" 路由而不经过主页，会出现很多与查找文件相关的问题。控制台显示如下：

edit:36 GET http://localhost:5000/user/styles/main.css  edit:37 GET
http://localhost:5000/user/styles/pikaday.css  edit:41 GET
http://localhost:5000/user/bower_components/webcomponentsjs/webcomponents-lite.js
edit:45 GET http://localhost:5000/user/elements/elements.html 404 (Not
Found)

我的app.js文件只有这些行：

var app = document.querySelector('#app');
app.baseUrl = '/';

而我的routing.html是：

<script>
window.addEventListener('WebComponentsReady', function() {

// Removes end / from app.baseUrl which page.base requires for production
if (window.location.port === '') {  // if production
  page.base(app.baseUrl.replace(/\/$/, ''));
}

// Routes
page('/', function() {
  app.route = 'home';
});

page(app.baseUrl, function() {
  app.route = 'home';
});

page('/user/edit', function() {
  app.route = 'user/edit';
});

page('*', function() {
  console.info('404 page');
  page.redirect(app.baseUrl);
});

// add #! before urls
page({
  hashbang: false
});
});
</script>

我尝试了很多东西：

如果我将路线 /user/edit 更改为 user-edit，它可以正常工作。显然问题与路线中的“/”有关。
如果我将 hashbang 设置为 true，它也可以正常工作。但是，我真的很想在我的应用程序中使用漂亮的 URL。
如果在 index.html 中我将 <link rel="import" href="elements/elements.html"> 更改为 <link rel="import" href="/elements/elements.html">，浏览器会找到所有元素，但路由会继续出现同样的问题。

关于如何解决这个问题有什么想法吗？我相信它会帮助很多也想使用漂亮 URL 的人

Answer 1

这是一个 server-side 问题。基本上，您必须在您的服务器上启用对 HTML5 的 pushstate 的支持。如果您使用的是 Apache，您可以像 this one. For Nginx, you can refer to this one.

一样编辑 .htaccess 文件

Answer 2

我认为是应用程序或路由器的问题page.js。因为当您单击按钮时，uri /user/edit 添加到您的主机 localhost:5000。但是当您重新加载页面时，主机消失了。首先，删除此部分并重试：

page(app.baseUrl, function() {
  app.route = 'home';
});

Answer 3

我发现问题了！文档中有一个关于使用 firebase 漂亮 URL 的重要细节，但文档中没有。

根据文档：https://github.com/PolymerElements/polymer-starter-kit/blob/master/docs/deploy-to-firebase-pretty-urls.md

有一个重要的步骤： 7. Add <base href="/"> to head in index.html

但是，细节是标签 <base href="/"> 应该添加在 head 的开头和其他导入之前。问题是我把它放在 <head> 的末尾，所以我只是把它放在开头并开始正常工作。

在这个细节上浪费了很多时间之后，我向 Polymer Startet Kit 提出了改进文档的建议：https://github.com/PolymerElements/polymer-starter-kit/issues/670

希望这个疑惑能帮到更多人:)

Polymer 中的 PageJs 漂亮 URL 不起作用

PageJs pretty URLs in Polymer aren't working

routing

polymer

polymer-starter-kit