在 Vue3中，封装一个 router-links ,支持内外链接都能跳转！

<router-link> 标签是用于在Vue应用程序的不同页面之间跳转，但它不是跳转到外部链接，相反，我们一般使用 <a> 标签。

也许只有我这么认为，但很多时候，我无法跟上这种差异。其他时候，链接可能是动态的，即来自数据库或用户提供的某个数据源。在这种情况下，你根本不知道链接是外部的还是内部的，在每个可能使用链接的地方手动做一个v-if是多么痛苦。

如果只用一个组件来处理所有内部和外部的链接，那不是很好吗?

幸运的是，扩展<router-link>组件非常简单，只需将它包装到我们自己的定制组件中。Ok，我们需要构建一个AppLink组件来处理链接，无论是外部的还是内部的。

AppLink组件

AppLink组件的 props 要包含 router-link 的所有 props。为什么？ 因为这样我们组件的“接口”就可以模仿 Router Link 的接口，无需再记住另一个API。 我们可以通过从Vue Router导入 RouterLink 并将其 props 解构到我们的组件中，如下所示：

// AppLink.vue

在 template 中，创建 router-link 并将 props 传递给它，我们还需要传入slot ，这个可以在 router-link