1

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

我想访问路线localhost:5000/user/edit。如果我在主页（本地主机：5000）并单击带有 a 的按钮，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 的人

4

3 回答 3

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

希望这个疑问能帮助更多的人:)

于 2016-01-22T17:11:22.560 回答
1

这是服务器端的问题。基本上，您必须pushstate在您的服务器上启用对 HTML5 的支持。如果您使用的是 apache，您可以像这样.htaccess编辑您的文件。Nginx 可以参考这个。

于 2016-01-22T10:27:29.360 回答
0

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

page(app.baseUrl, function() {
  app.route = 'home';
});
于 2016-01-22T10:53:57.083 回答