创建一个仅调整散列而不会丢失查询搜索字符串的锚 link 标记

Question

假设当前URL是：http://server.com/?key=value#/foo

在普通的锚标记 link 中，以下只会影响锚哈希：

<a href="#/bar">LINK</a>

并且 URL 变为：http://server.com/?key=value#/bar

但是，我在从另一个 .html 文件导入的 Web 组件的模板中添加 links。因此，为了使锚哈希相对于加载页面而不是组件的 html，我需要指定 link 如下：

<a href="/#/bar">LINK</a>

但是，像这样的 link 会导致查询搜索字符串丢失：http://server.com/#/bar

这里有干净的解决方案吗？当然，解决方法是创建一个继承自手动更新 window.document.location.

的新元素

Answer 1

所以，我目前的解决方法是创建一个新的锚标记继承自 <a>，接受属性 hash 而不是 href（使用 Polymer 0.9）：

<dom-module id="a-hash"></dom-module>
<script>
    Polymer({
        is: 'a-hash',
        extends: 'a',
        hostAttributes: { href: "" },
        properties: { hash: String },
        listeners: { tap: '_ontap', click: '_onclick' },
        _onclick: function(e) { e.preventDefault(); },
        _ontap: function(e) {
            e.preventDefault();
            document.location.hash = this.hash;
        }
   });
</script>

用法：

Link: <a is=a-hash hash="/client/side/route">Click me</a>

Answer 2

我找到了一个更简洁的解决方案来在新的 Web 组件中添加相关链接。只需添加一个：

<base href="../../" />

到组件的 .html 文件的顶部（假设您将自定义元素保存在 elements/element-name 子目录中）然后您可以添加普通锚点，例如：

<a href="#/bar>LINK</a>

并且它将相对于原始应用程序的 URL 而不是组件的 html 创建，而不会丢失查询字符串或重新加载。

请记住，组件中的所有链接现在都将相对于应用程序的根而不是组件，因此可能需要相应地更新其他引用。

创建一个仅调整散列而不会丢失查询搜索字符串的锚 link 标记

Create an anchor link tag that just adjusts the hash without losing the query search string

html

anchor

hyperlink

web-component