Polymer 2新增页面点击后出现404错误求助

我之前也碰到过一模一样的情况！跟着官方教程一步步做，文件核对了好几遍，结果点导航就是跳404，真的挺闹心的。咱们一步步来排查，大概率是这几个容易忽略的细节出了问题：

1. 核对路由与页面的匹配关系 #

首先重点检查my-app.html里的路由和页面映射，这是最常见的出错点：

• 确保<app-route>的pattern配置和导航链接的路径一致，比如路由pattern="/:page"的情况下，导航链接的href应该是/new-view，对应的<my-new-view>在<iron-pages>里的name属性必须是new-view（完全匹配，大小写、连字符都不能错）。示例代码参考：

  <iron-pages selected="{{routeData.page}}" attr-for-selected="name" role="main">
    <my-view1 name="view1"></my-view1>
    <my-view2 name="view2"></my-view2>
    <my-new-view name="new-view"></my-new-view> <!-- 这里的name要和路由page值严格对应 -->
    <my-view404 name="view404"></my-view404>
  </iron-pages>
  

• 确认<app-location>和<app-route>的route绑定正确，有没有把route属性双向绑定传递，比如：

  <app-location route="{{route}}"></app-location>
  <app-route
      route="{{route}}"
      pattern="/:page"
      data="{{routeData}}"
      tail="{{subroute}}">
  </app-route>
  

2. 检查新组件的导入语句 #

别小看这一步，有时候就是导入路径写错了：

• 在my-app.html的顶部，必须正确导入my-new-view.html，比如：

  <link rel="import" href="my-new-view.html">
  

• 核对文件路径：如果你的my-new-view.html放在src子文件夹里，导入路径要改成src/my-new-view.html，必须和实际文件位置完全匹配。

3. 确认导航菜单的链接格式 #

导航栏里的<a>标签href不能带哈希，必须用纯路径：

• 错误示例：<a href="#new-view" class="drawer-list-item">New view</a>
• 正确示例：<a href="/new-view" class="drawer-list-item">New view</a>

4. 清理缓存并重启开发服务 #

浏览器或开发服务器的缓存可能导致新组件没被加载：

• 关闭浏览器，清除页面缓存（快捷键一般是Ctrl+Shift+Delete）
• 终止当前的polymer serve进程，重新执行polymer serve启动服务，再打开页面测试

5. 检查polymer.json配置（容易忽略） #

项目根目录的polymer.json里，要确保新组件被包含在资源列表中：

• 打开polymer.json，查看sources数组，确认包含了my-new-view.html（如果在src里就是src/my-new-view.html），比如：

  "sources": [
    "src/**/*",
    "index.html",
    "src/my-new-view.html"
  ]
  

6. 查看浏览器控制台的错误提示 #

打开浏览器开发者工具（F12），切换到控制台标签，看有没有组件加载失败的404错误，或者路由绑定的报错信息。这些提示能直接帮你定位到问题根源，比如如果显示my-new-view.html加载失败，那就是导入路径的问题。

我当时是因为<iron-pages>里的name属性多写了一个字母，改完就正常显示了。你按照上面的步骤逐一排查，应该能解决这个问题！

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