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，则可以正常使用。显然这个问题与＆＃39; /＆＃39;有关。在路线上。
如果我将hashbang设置为true，它也可以正常工作。但是，我真的想在我的应用程序中使用漂亮的URL。
如果在index.html中我将<link rel="import" href="elements/elements.html">更改为<link rel="import" href="/elements/elements.html">，则浏览器会找到所有元素，但路由会继续存在同样的问题。

有关如何解决此问题的任何想法？我相信它会帮助很多想要使用漂亮网址的人

Answer 1

我发现了这个问题！关于使用文档中缺少的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

希望这个怀疑能帮助更多人：）

Answer 2

这是服务器端问题。基本上，您必须在服务器上启用对HTML5＆n pushstate的支持。如果您使用的是apache，则可以修改.htaccess文件，例如this one。对于Nginx，您可以参考this one。

Answer 3

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

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

Polymer中的PageJs漂亮网址不起作用

3 个答案: