[Vue3] script setup - Router

요즘 Vue3의 component 태그를 자주쓰게 된다. 

항상 파일을 import해주면서 Object형식으로 호출하여 사용하고 있었는데 

조금 더 발전한 방법으로 사용할 수 있게 되었다. ✨

---

new.vue

<script setup>
import { computed, ref } from "@vue/reactivity";
import { defineAsyncComponent } from "vue";
import { useRoute } from "vue-router";

let pageId = ref("common");
const pageList = ref([
  {    id: "a",    name: "a",    fileName: "A",  },
  {    id: "b",    name: "b",    fileName: "B",  },
]);

const componentLoader = computed(() => {
  const page = pageList.value.find((page) => page.id === pageId.value);
  return defineAsyncComponent(() => import(`@/app/views/${page.fileName}`));
});

const route = useRoute();
if (route.params.page) {
  pageId.value = route.params.page;
};

</script>

<template>
  <div>
    <ul class="nav">
      <li
        class="nav-item"
        v-for="(item, index) in pageList"
        :key="index"
        @click="pageId = item.id"
        :class="{ active: item.id === pageId }">
        {{ item.name }}
    	</li>
    </ul>
    <component :is="componentLoader" />
  </div>
 </template>

 

template literals 를 사용하여 fileName을 import 시키기!

Template literals (Template strings) - JavaScript | MDN

 

 

---

old.vue

<script setup>
import { ref, shallowRef } from 'vue';
import a from '@/apps/views/a.vue';
import b from '@/apps/views/b.vue';

const compId = ref('a');
const menuList = shallowRef({ a: a, b: b });

const onClick = (menu) => {
  compId.value = menu;
};

</script>

<template>
  <div>
    <ul>
      <li
        v-for="menu in Object.keys(menuList)"
        :key="menu"
        @click="() => {onClick(menu)}">
        {{ menu }}
      </li>
    </ul>

    <component :is="menuList[compId]" />
  </div>
</template>

<style lang="scss" scoped></style>