超级会员免费看
本文介绍了如何在Vue3中扩展<router-link>组件，创建一个名为AppLink的自定义组件，以支持内部和外部链接的跳转。AppLink组件提供了更高的灵活性，可以判断并处理内部及外部链接，同时支持在新窗口中打开外部链接。此外，为了链接安全，添加了rel='noopener'属性，并允许设定外部链接的独特样式，提高用户体验。
<router-link> 标签是用于在Vue不同页面之间跳转，但它不是跳转到外部链接，相反，我们一般使用 <a> 标签跳转到外部链接。
扩展<router-link>组件非常简单，只需将它包装到我们自己的定制组件中。Ok，我们需要构建一个AppLink组件来处理链接，无论是外部的还是内部的。
AppLink组件
AppLink组件的 props 要包含 router-link 的所有 props。为什么？因为这样我们组件的“接口”就可以模仿 Router Link 的接口，无需再记住另一个API。我们可以通过从Vue Router导入 RouterLink 并将其 props 解构到我们的组件中，如下所示：
// AppLink.vue
<script>
import {RouterLink} from 'vue-router'
export default{
props:{ ...RouterLink.props }
}
</script>
在 template 中，创建 router-link 并将 props 传递给它，我们还需要传入slot ，这个可以在 router-link
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
