纸张菜单按钮内的纸张项目链接（Polymer-1.0）

更新1：在Polymer中找到了解决此问题的方法

更新2：决定根据使用page.js而不是app router的重新构建我的布局，看起来效果不错，尽管他们不使用纸张菜单中的纸张项目，而是使用自定义锚元素

搜索每一个文档，但我找不到这个（尽管有几乎相同的标题，而不是相同的东西）

TLDR：我需要有一个完整的文件项目点击链接。不仅仅是文本本身。为了清晰起见，请参见下图，以下是图片

我有下面的代码。我将链接标签与应用路由器路由结合使用，效果非常好。唯一的问题是：我想让整个纸张菜单项可以用链接标签点击

当我使用下面的代码时，当直接点击链接tekst本身时，会检索到右边的页面，但这不会创建一个“选中”状态。当我点击按钮时（就在文本之外），按钮被选中，但是页面没有被检索，因为我没有点击链接

一定有一个简单的方法来做到这一点吧？我的意思是，我可以通过覆盖所有CSS来强制实现这一点，但在我看来，纸张菜单中纸张项目中的链接将是一个非常常见的事情，它应该自动完成，或者使用属性或其他东西

<paper-menu class="list">
  <paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
  <paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>

---

我查看了关于纸张项目、纸张菜单和其他内容的文档，但这些文档从不使用带有链接的示例。

在我看来，最干净的方法是完全删除链接，只添加点击事件

（您也可以在菜单中使用dom repeat）

---

将

class=“flex”

添加到每个锚定标记。

您好，我认为如果您创建一个在线示例，我们可以使用它将很有帮助。为什么不将

元素包装在

标记中，而不是用另一种方式？@idleherb好主意；）我已将url添加到描述中。@VartanSimonian这看起来很难看。项目是包装，链接应该是可选的。@AlbertSkibinski，按照@vartan simonian的建议做，并用

包装。要使用纸质项目作为链接，请用锚定标签包装。由于纸张项目已接收焦点，您可能希望通过将其tabindex设置为-1.Yes来防止锚定标记接收焦点，这是可能的，但这不会对SEO产生负面影响吗？对我来说，向站点添加最新的sitemap.xml是任何JavaScript站点的最佳方式，无论是否使用链接，这将允许任何搜索引擎浏览您的站点。那些执行JavaScript的大型搜索引擎将不会有问题，而那些不执行JavaScript的搜索引擎可能不会呈现任何内容。还有一种丑陋的CEO优化方式——只添加带有display:none的链接，它不会干扰你的用户界面，并且可以作为搜索引擎的普通链接。但这是一个很好的观点。所以，是的，你的答案是正确的，但我仍然怀疑这是否也是聚合物纸张项目链接的最佳实践。也许这很明显，但我在文档中找不到任何关于它的信息。你认为他们是否认为每个人都在使用JS，或者当前的行为应该被视为一个bug？不确定，我也在学习polymer：）如果pushstate anchor允许is=“pushstate anchor”指向其他标记，而不是）他们有点硬编码它。然后你可以不使用任何JS（只需将属性直接添加到paper item元素），但我仍然看不到对CEO友好。更新了我的原始帖子，在paper item问题队列中添加了一个问题的链接，我认为它解决了这个问题。添加此类并不能解决问题：它只会使链接的可点击区域变大，但它并没有设置活动状态。它对我有效，尽管这些项目仍然包含一些填充。
<paper-menu class="list">
  <paper-item icon="home" label="Home" on-tap="menuSelected" mypath="/">Home</paper-item>
  <paper-item icon="polymer" label="Demo" on-tap="menuSelected" mypath="/demo">Demo</paper-item>
</paper-menu>

Polymer({
    is: 'your-menu',
    menuSelected: function (e) {
        var mypath = e.currentTarget.getAttribute('mypath'); 
        document.querySelector('app-router').go(mypath);
    },
})();