I created a navigation bar with links to external social media platforms.
After clicking on the GitHub link, I encountered some errors and here are the URLs for reference:
https://i.sstatic.net/KCh3C.png https://i.sstatic.net/OXQOK.png
<template>
<nav>
<ul>
<li v-for="link in links" :key="link">
<link-atom :to="link.path">
{{ link.name }}
</link-atom>
</li>
</ul>
</nav>
</template>
<script setup>
import LinkAtom from "#/atoms/Link.vue";
const links = [
{
name: "GitHub",
path: "https://github.com/",
},
{
name: "LinkedIn",
path: "https://www.linkedin.com/",
},
{
name: "Dribbble",
path: "https://dribbble.com/",
},
];
</script>
<style lang="scss" scoped></style><template>
<component :is="is" :href="href" :to="to">
<slot></slot>
</component>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
is: { type: String, default: "router-link" },
to: { type: [String, Object], required: true },
});
const href = computed(() => {
if (props.is === "a") return props.to;
else return null;
});
const to = computed(() => {
if (props.is === "router-link") return props.to;
else return null;
});
</script>If you have any suggestions on how to resolve these issues,
I appreciate your help!