Расширение ссылок Vue Router в Vue 3

Тег <router-link>— отличный инструмент для навигации между разными страницами вашего приложения Vue, но это не тот инструмент, который можно использовать при переходе по внешней ссылке, для этого вы захотите использовать обычный <a>тег. Может быть, это только я, но часто я не могу уделить внимание тому, чтобы не отставать от разницы. В других случаях ссылки могут быть динамическими, то есть исходящими из базы данных или какого-либо источника данных, предоставленного пользователем. В таких случаях вы просто не будете знать, является ли ссылка внешней или внутренней, и как сложно было бы делать v-if вручную в каждом месте, где эта ссылка может использоваться.

Было бы неплохо просто использовать один компонент для всех внутренних и внешних ссылок? Если вы чем-то похожи на меня, вы будете делать это прямо сейчас.

К счастью, расширить <router-link>компонент очень просто, обернув его в свой собственный компонент. Давай сделаем это! Давайте создадим AppLinkкомпонент, который будет обрабатывать любую ссылку, внешнюю ИЛИ внутреннюю.

https://vueschool.io/articles/vuejs-tutorials/extending-vue-router-links-in-vue-3/?source=weeklyVueNews&campaign=ISSUE_ID_PLACEHOLDER