。external-linki{font-size:0.8em;opacity:0.7;}标签用于在Vue应用的不同页面之间跳转，但不是跳转到外部链接，我们一般使用标签。也许这只是我，但很多时候，我跟不上差异。其他时候，链接可能是动态的，即来自数据库或用户提供的某些数据源。在这种情况下，您不知道链接是外部链接还是内部链接，也不知道在每个可能使用链接的地方手动执行v-if会是多么痛苦。只用一个组件来处理所有内部和外部链接不是很好吗？幸运的是，扩展组件就像将它包装到我们自己的自定义组件中一样简单。好的，我们需要构建一个AppLink组件来处理外部或内部的链接。AppLink组件AppLink组件的props应该包含router-link的所有props。为什么？因为这样我们的组件的“接口”就可以模仿RouterLink的接口，而不必记住另一个API。我们可以从VueRouter导入RouterLink并将其属性解构到我们的组件中，如下所示：//AppLink.vue在template中，创建router-link并传递props给它，我们还需要传入slot，可以在router-link中插入内容。//AppLink.vue至此，我们已经处理完所有的内部链接，那么外部链接呢？如前面提到，外部链接使用a标签，所以我们将它添加到模板中。像routerlink一样，将传入的to值赋值给href。//AppLink.vue这样，内部链接和外部链接都有相应的处理。需要注意的是，以上内容只适用于Vue3，因为它包含多个根元素。现在，我们需要一个计算属性来告诉AppLink使用哪个链接，我们先将其称为isExternal。首先，我们检查prop的值是否为字符串。这是必需的，因为to属性可能是一个对象，例如有时传递给路由器链接（即：to="{name:'RouteNameHere'}"）。然后，我们将检查该字符串是否以http字符串开头。如果两个条件都为真，则判断为外部链接。//AppLink.vue之后isExternal计算属性，我们可以使用v-if来操作，如下图：//AppLink.vue>router-linkv-elsev-bind="$props">大功告成，我们可以这样使用AppLink组件了。//AnywhereinyourappClickMe更高的灵活性Openinanewwindow我们可以添加一些更常用的功能。比如我们想要所有的外部链接都在新窗口打开，这很容易做到，只需要在我们的a标签中加上target="_blank"即可。//AppLink.vue...当然有些外部链接不需要新窗口打开，我们可以通过指定目标来告诉组件如何在内部打开链接，如下：VueSchoollinksecurity当我们使用target="_blank"当一个属性链接到另一个站点上的页面时，它最终可能会使我们的站点面临性能和安全问题：它链接到的页面最终可能会在与该页面相同的进程上运行。根据链接页面的最新程度，这可能会降低您自己页面的速度。另一个页面也可以通过window.opener属性访问原页面窗口，存在安全隐患。解决这个问题的方法是在所有的外部链接标签中添加rel="noopener"属性，因为我们已经将它们封装到组件中了，所以只需要在组件内部的a标签中添加即可。//AppLink.vue...外部链接的独特样式我见过一些网站在他们的网站上设置的网站的外部链接样式与自己网站上指向本站的链接有点不同。这可以帮助用户更好地理解他们要转到外部链接。这个样式可以是任何东西，比如给第三方链接加上一个警告图标，告诉用户跳转的风险。在我们的组件中实现这一点非常简单，只需将外部链接类添加到模板中的a标记并使用css对其进行不同的样式设置：//AppLink.vue//(musthavefontawesomefontincludedinproject)...。external-linki{font-size:0.8em;opacity:0.7;}AppLink的想法到此结束。当然如果有新的需求可以自己扩展。~完了，我是小智，下期见！作者：DanielKelly撰文译者：前端小智-3/
