在前端开发中，为了方便开发过程，我们经常使用一些第三方库。其中，npm 包是前端开发中最广泛使用的一种包管理工具。而 @polymer/iron-location 则是用于实现单页面应用（SPA）中的路由跳转的 npm 包之一。本文将详细介绍 @polymer/iron-location 的使用方法，包括如何进行安装、怎样进行配置以及如何进行路由的跳转。
安装 @polymer/iron-location
在使用 @polymer/iron-location 前，我们需要使用 npm 进行安装。在终端窗口（或命令行窗口）中输入以下命令即可进行安装：
npm install @polymer/iron-location --save
其中，--save 参数表示将 @polymer/iron-location 添加到 package.json 文件的 dependencies 中，以便于日后进行管理。
配置
在进行路由操作前，我们首先需要进行配置，以便于 @polymer/iron-location 的正常使用。以 Polymer 3.0 项目为例，我们需要在 index.html 文件的 body 部分添加以下元素：
<iron-location path="{{route.path}}" use-hash-as-path></iron-location>其中，path 属性用于存储当前页面的路径，use-hash-as-path 属性表示使用 '#' 作为 URL 中的分隔符。
接下来，在 index.js 文件中，我们需要将路由跳转相关的代码添加至 CustomElements.define 的回调函数中：
-- -------------------- ---- -------
------ ------------------------------------------
------ - ----- -------------- - ---- -------------------
----- ----- ------- -------------- -
------ --- ---------- -
------ -----
-------------------------------
---- --- ---
--
-
------------------- -
--------------------------
------------------------------------------ ------- -- -
----- ---- - ------------------
-------------------- - ------
-- ------
---
-
-
------------------------------- -------在上述代码中，change 事件用于监听路由的变化，detail.path 表示路由变化后的路径，我们可以在此处添加路由处理的相关代码。
路由跳转
在进行路由跳转时，我们可以使用 element.set 方法来更新路由。例如，在点击 button 后，跳转至 "/user/profile"：
handleClick(evevt) {
const path = '/user/profile';
this.$.location.set('path', path);
console.log('路由跳转至：' + path);
// 路由处理代码
} 值得注意的是，上述代码中的 this.$.location 表示通过 ID 获取到的 <iron-location> 元素，我们可以通过这种方式进行元素的引用。
总结
本文介绍了如何安装和配置 @polymer/iron-location，并通过示例代码详细讲解了该 npm 包的使用方法。通过对本文的学习，你可以更加深入地了解该 npm 包的使用，以便于在实际开发中进行运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f756e0ca9b7065299ccbcc4