vue的router-link使用方法,vue-router使用
Vue-router是Vue.js的官方路由插件，与Vue.js深度融合，适合构建单页面应用。本文主要介绍如何在Vue 3中扩展Vue路由器的链接的相关信息。有需要的可以参考一下。
前言
路由器链接选项卡是在Vue应用程序的不同页面之间导航的好工具，但它不是导航到外部链接的工具。因此，您应该使用普通的A标签。也许只是我的问题，但很多时候，我都懒得去注意其中的不同。其他时候，链接可能是动态的，即来自用户提供的数据库或某些数据源。这种情况下，你根本不知道这个链接是外部的还是内部的，在每一个可能用到这个链接的地方手动做V-if是多么痛苦的事情。
仅仅使用一个组件来处理所有的内部和外部链接不是很好吗？如果你像我一样，你现在就会这么做。
幸运的是，扩展router-link组件非常简单，只需将其包装在您自己的自定义组件中。我们开始吧！让我们构建一个AppLink组件，它可以处理任何链接，无论是外部的还是内部的。
AppLink组件
我们应该做的第一件事是让AppLink组件接受所有与路由器链接相同的属性。为什么？这样，我们组件的‘接口’就可以模仿路由器Link的接口，我们就不会再有一个API需要记忆了。我们可以通过从Vue Router导入RouterLink并将其props分散到组件的props选项中来实现这一点。
//AppLink.vue
脚本
从“vue路由器”导入{RouterLink}
导出默认值{
道具：{.RouterLink.props }
}
/脚本
在模板区域，我们现在可以创建一个路由器链接标签，并将组件的所有属性绑定到它。我们还需要传入插槽，以便标签之间提供的文本和标签将出现在路由器链接中。
//AppLink.vue
模板
路由器链接v-bind=$props 插槽//路由器链接
/模板
就像现在，我们已经处理了所有的内部联系。那么，外部链接呢？如前所述，外部链接使用A标记，所以让我们将它添加到模板中。像路由器链接一样，我们应该通过插槽。让我们也将href绑定到to属性。
//AppLink.vue
模板
a:href= to rel= external no follow rel= external no follow 插槽//a
路由器链接v-bind=$props 插槽//路由器链接
/模板
酷，这解释了内部链接和外部链接！此时，可能值得注意的是，上述方法仅适用于Vue 3，因为它包含1个以上的根元素)。
现在，我们只需要一个条件来告诉我们向AppLink提供什么类型的链接。我们可以创建一个名为isExternal的计算属性来确定这一点。首先，我们必须检查我们的to prop的值是否是一个字符串。这是必要的，因为to属性可以是对象，例如有时传递给router-link(即：to={name:RouteNameHere} )。然后，我们将检查字符串是否以http字符串开头。如果这两个条件都成立，那么我们就有了自己的外部联系。
//AppLink.vue
脚本
导出默认值{
//.
计算值：{
isExternal(){
返回this . to=== string this . to . starts with( http )
}
}
}
/脚本
路由器链接在模板区域。我们现在可以在v-if中使用isExternal计算的props。当它是时，否则将显示true。
//AppLink.vue
模板
a v-if= isExternal :href= to rel= external no follow rel= external no follow 插槽//a
路由器链接v-else v-bind= $ props slot//路由器链接
/模板
就是这样！我们完了！在应用程序中全局注册组件后，现在可以像这样使用它了。
//应用程序中的任何位置
AppLink:to=[外部或内部链接]单击我/AppLink
进一步的灵活性
在新标签页中打开
让我们让AppLink组件更有用。例如，我们希望所有外部链接总是在新标签页中打开。很简单。只要在组件中的A标签中添加一个target=_blank ，现在整个网站的所有外部链接都在新标签中打开。
//AppLink.vue
模板
a.target=_blankslot//a
.
/模板
这是您可能希望应用于网站上大多数外部链接的规则，但是如果您希望任何特定的外部链接在同一个选项卡中打开，您可以使用html target属性告诉该链接实例这样做。
AppLink:to= https://vue School . io target= _ self vue学校/AppLink
链接安全
当您使用target=_blank 属性链接到另一个网站上的页面时，最终会使您的网站面临性能和安全问题。
链接的页面最终可能会在与您的页面相同的进程中运行。根据链接的网页，这可能会降低你自己的网页的速度。
另一页也可以通过window.opener属性访问原始页窗口，从而导致安全问题。
关于这个问题的更多细节，请参见这篇信息丰富的文章。
这个问题的解决方案是为所有外部链接标签提供一个rel=noopener 属性。但是记住这样做有多痛苦.哦，等等.我们不需要这么做。我们可以将它添加到我们的AppLink组件中一次，就这样。
//AppLink.vue
模板
a.rel=noopenerslot//a
.
/模板
外部链接的独特风格
我看到有些网站的外链在他们网站上的风格和他们自己网站上其他地方的链接有点不一样。这可以帮助用户更好地理解他们是如何进入一个他们从未访问过的网站的。它可以是任何东西，从链接旁边微妙的“外部链接”图标到链接下面的小警告，如“链接到第三方网站”。在我们的组件中实现这一点非常简单，只需在模板中的A标签上添加一个外部链接类，然后用css更改其样式，或者在sudo-element后添加一个：即可。你甚至可以给外部链接添加全新的元素，比如一个字体很棒的图标。
//AppLink.vue
//(项目中必须包含字体awesome字体)
模板
a.class=外部链接
slot/I class= Fas fa-external-link-alt /I
/a
.
/模板
样式范围。外部链接i {
字体大小：0.8微米；
不透明度：0.7；
}
/风格
总结
这只是一种尝试，您可以扩展router-link以满足常见和特殊情况的需要。此外，由于所有的链接都封装在一个组件中，所以您可以轻松地更新所有链接的不同方面。你能想出其他有用的方法来改进我们的AppLink组件吗？你在应用程序中使用类似的方法吗，有一些智慧可以分享吗？
关于如何在Vue3中扩展Vue路由器链接的这篇文章到此为止。有关Vue 3扩展Vue路由器链接的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。