简介
@npm-polymer/iron-location 是一个用于管理 Web 应用程序 URL 的 Polymer 元素，可用于在 Web 应用程序中访问和更新 URL。该包允许开发者使用 Polymer、Web Components 或任何其他支持自定义元素的框架轻松创建具有 URL 管理功能的 Web 应用程序。
安装方式
该 npm 包可以通过以下命令安装：
npm install --save @npm-polymer/iron-location
使用方法
导入
在 Polymer 或其他支持自定义元素的框架中使用 @npm-polymer/iron-location，可以通过以下方式导入：
import '@npm-polymer/iron-location/iron-location.js';
属性
@npm-polymer/iron-location 提供了以下属性：
path (String)
当前 URL 的路径部分（不包括域名、端口和查询参数）。例如，对于 URL http://example.com/foo/bar?baz=qux#anchor，path 属性的值将是 /foo/bar。
<iron-location path="{{myPath}}"></iron-location>query (Object)
当前 URL 的查询参数部分。例如，对于 URL http://example.com/foo/bar?baz=qux#anchor，query 属性的值将是 { baz: 'qux' }。
<iron-location query="{{myQuery}}"></iron-location>hash (String)
当前 URL 的哈希部分（不包括 # 字符）。例如，对于 URL http://example.com/foo/bar?baz=qux#anchor，hash 属性的值将是 anchor。
<iron-location hash="{{myHash}}"></iron-location>url (String)
当前 URL 的完整地址。例如，对于 URL http://example.com/foo/bar?baz=qux#anchor，url 属性的值将是 http://example.com/foo/bar?baz=qux#anchor。
<iron-location url="{{myUrl}}"></iron-location>方法
@npm-polymer/iron-location 还提供了以下方法：
set(path: String, query?: Object, hash?: String)
设置 URL。
this.$.location.set('/new/path', { foo: 'bar' }, 'new-hash');事件
@npm-polymer/iron-location 还发布了以下事件：
location-changed
在 URL 更改时触发。
this.$.location.addEventListener('location-changed', function(e) {
console.log('Location changed to', e.detail.value);
});示例
以下是一个示例代码，显示如何使用 @npm-polymer/iron-location 管理 URL：
-- -------------------- ---- -------
----------- ----------------
----------
-------------- ------------- --------------- -----------------
--------------- --------------
----------------
----------- -- --------------
-------- ----------- -------------
------ ----------- ------------------------
------- -----------
------- ---------------------------- -- ------------------
-----------
--------
----- --------- ------- --------------- -
------ --- ---- - ------ ------------- -
---------- -
-------------------------------- - ---- ----- -- ------------
-
-
----------------------------------- -----------
---------
-------------结论
使用 @npm-polymer/iron-location 使得在 Web 应用程序中实现 URL 管理更加容易。借助该包提供的属性、方法和事件，开发者可以轻松访问、更新和监视浏览器 URL。而且， @npm-polymer/iron-location 与 Polymer 和 Web Components 的其他元素兼容，因此它可以与其他 Polymer 或 Web Components 组件一起使用，以创建具有 URL 管理功能的完整 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb37