助攻型前端工程师，边学边记录，技巧和概念扫起来

后端伙伴巧妙运用

学前端就来点实在的，今天带来的是，关于前端路由跳转和参数传递的详细介绍！

一、路径（path）

路径是访问该组件的 url 地址（因为我们正在用vue-router，所以这是相对地址）。如果使用“ /user”，则该组件将为路径“ /user”中的一切内容。

二、路由跳转

我们有很多种可以使我们从一个页面跳转到另一个页面，你可以使用一些功能强大的方法。

1. 利用 HTML a 标签的 href 属性来进行跳转

虽然 a 标签不是很有常见，但它对我们有用，用它来进行跳转，但在 a 标签中使用 href 属性，因为它利用了 历史记录 API。

2. 使用 history.pushState() 或history.replaceState() 来更新 URL

使用 HTML5 的历史记录 API 后，我们就能够来控制历史记录。history.pushState() 会更新历史记录，而不会更新地址栏, 因为访问过的路径不会被记录。

3. 使用 location.hash 来更新哈希（hash）部分

哈希（hash）是 URL 中哈希（hash）号之后的部分，这比更新历史记录要更简单。这就是为什么这么多前端框架用它来实现前端路由。因为它让浏览器的导航工作变得非常简单，但它并未保证在客户端支持 HTML5 历史记录情况下，hash 是安全的。

三、参数传递

如何将参数传递到其他组件？当我们要从某一个组件跳转到另一个组件时，有时候，我们希望这个组件的 url 中能够包含某些数据。

1. 使用 a 标签的 href 属性，来进行跳转

如果我们给 a 标签的href 属性动态的赋予值，那么当我们给它进行跳转的时候，我们所传递的这些数据，也会跟着一并传递，也就是将 href中值赋予哪个我们组件，那么这个组件内的值也就和 href 的值一样，因为 href 属性更新的是历史记录，那么，当前的组件地址也就跟着 href 属性进行绑定。

2. 使用 location.hash 或 history 来更新 URL

利用 history 我们有 history.pushState()和 history.replaceState() 这两个函数来使用。

四、动态路由

当我们将组件嵌套时，我们需要动态的来配置我们这些组件，我们需要进行动态路由。因为我们不想要我们来手动维护它。

一个很常见的动态路由的方法是给这个组件来创建一个参数列表。当这个组件被加载时，我们需要使用参数来渲染 DOM 元素，这个参数其实也就是路由路径参数。我们还可以使用这个参数 来为组件创建更详细的 url。

3. 动态段（动态分段）

1. @name 匹配的总是 相对 URL ，：name 总是匹配 完整 URL

2. 利用 js 的 decodeURIComponent可以针对@；针对: 需要手动将/改成+再进行decodeURIComponent

五、封装组件

最后，最容易的方式来封装复杂组件的方式是，创建一个全新的组件，这个组件的路径可以是“ /a”。在其中使用已有组件作为一个内嵌的子组件，最好再增加一些它所需要的额外的数据。

六、安全

安全就是，需要确保用户不试图来进入到没有任何权限来访问到这个组件的路径。对于这种情况，我们可以来使用这些功能强大的路由来做一下事。

1. 利用 next() 来防止加载组件
2. 利用 next() 来转换路由

七、小技巧

2. window.loaction.hash = '/new/url';
3. 使用 Navigo 来进行路由

八、校验

这个自定义的校验器是基于我们之前使用过的那个创建的，我们再来用它，如果用的是并不是这个自定义的校验器，那我们就需要来根据这个检验器来为检验做一些修改，我们现在来使用这个检验器。

九、下一个？

现在你已经学习了后端组件 ，下一个就是你可以为它来创造一个计数的组件，或者来学习一些这之外的 other。