Polymer 1.0页面刷新404问题求助：neon-animated-pages路由异常

为啥会踩这个坑？ #

哥们儿，这可是单页应用（SPA）里超常见的路由bug！你通过href跳转时，neon-animated-pages是靠前端路由偷偷切换页面的——说白了就是浏览器没真给服务器发请求，全是前端JS在搞事情。但刷新页面时，浏览器会认死理，直接向服务器请求当前URL对应的文件，可服务器上根本没有/your-page-path这种路径的文件啊，可不就返回404了嘛！

两种解决方案，按需挑 #

思路1：服务器端配置（推荐，URL更干净） #

核心逻辑很简单：让服务器把所有不是静态资源的请求，都返回你的入口文件（也就是你的app.html）。这样刷新时服务器先给你返回app.html，然后前端路由再根据当前URL渲染对应的页面。

下面给你不同服务器的现成配置示例：

Nginx配置

找到你的Nginx站点配置文件，在location /块里加try_files指令：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/project;

  location / {
    # 先找请求的文件/目录，找不到就返回app.html
    try_files $uri $uri/ /app.html;
  }
}

改完重启Nginx就生效。

Apache配置

先确保Apache开了mod_rewrite模块，然后在项目根目录建个.htaccess文件，写入：

RewriteEngine On
RewriteBase /
# 直接访问app.html就跳过
RewriteRule ^app\.html$ - [L]
# 如果请求的不是文件也不是目录，就转发到app.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /app.html [L]

Node.js Express配置

先装个connect-history-api-fallback中间件：

npm install connect-history-api-fallback --save

然后在你的Express代码里加这几段：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// 先托管静态资源（css、js、图片这些）
app.use(express.static(__dirname + '/public'));

// 启用history路由 fallback，指定入口是app.html
app.use(history({
  index: '/app.html'
}));

// 再托管一次静态资源，确保fallback后能加载到资源
app.use(express.static(__dirname + '/public'));

// 启动服务
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

思路2：前端改用Hash路由（不用改服务器，URL带#） #

如果不想碰服务器配置，你可以把路由改成Hash模式——就是在URL里加个#，比如把原来的<a href="/page2">改成<a href="/#/page2">。

这样刷新页面时，浏览器只会请求根路径（/），服务器返回app.html，前端路由再读取#后面的部分渲染对应页面。缺点是URL会多一个#，但胜在简单快捷，不用折腾服务器。

最后补个小检查 #

确保你的neon-animated-pages能正确监听路由变化，比如通过iron-router（如果用的话）或者自定义JS逻辑，把当前URL路径和neon-animated-pages的selected属性对应上，这样刷新后前端才能准确识别要显示哪个页面。

内容的提问来源于stack exchange，提问作者Dannick Montanede