router-linkのto属性でオブジェクトの使用・HyperText型のurl(string型)をpath(RouteLocationNamedRaw)に

src/components/Index/PageInfoPanel.vue

@@ -16,10 +16,11 @@
 import { toRef } from 'vue'
 import Icon from '/@/components/UI/Icon.vue'
 import useRouteInfo from '/@/lib/routeInfo'
+import { RouteLocationNamedRaw } from 'vue-router'
 
 interface Props {
   name: string
-  path: string
+  path: RouteLocationNamedRaw
 }
 
 const props = defineProps<Props>()

src/components/Index/PageInfoPanels.vue

@@ -11,7 +11,7 @@ const pages = routes.filter(route => route.name != 'Top')
       v-for="page in pages"
       :key="page.name"
       :name="page.name"
-      :path="page.path"
+      :path="{ name: page.name }"
     />
   </ul>
 </template>

src/components/Layout/ContentHeader.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import { RouteLocationNamedRaw } from 'vue-router'
 import Icon from '/@/components/UI/Icon.vue'
 
 type HeaderText = {
   title: string
-  url: string
+  path: RouteLocationNamedRaw
 }
 
 interface Props {
@@ -27,7 +28,7 @@ const props = defineProps<Props>()
         />
         <router-link
           v-if="index !== props.headerTexts.length - 1"
-          :to="headerText.url"
+          :to="headerText.path"
           :class="$style.link"
         >
           {{ headerText.title }}

src/components/NavigationBar/NavigationLinksItem.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { computed, toRef } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, RouteLocationNamedRaw } from 'vue-router'
 import Icon from '/@/components/UI/Icon.vue'
 import useRouteInfo from '/@/lib/routeInfo'
+import { routes } from '/@/router/index'
 
 interface Props {
   name: string
-  path: string
+  path: RouteLocationNamedRaw
 }
 
 const currentRoute = useRoute()
@@ -16,10 +17,13 @@ const props = defineProps<Props>()
 const routeInfo = useRouteInfo(toRef(props, 'name'))
 
 const isActive = computed(() => {
-  if (props.path === '/') return currentRoute.path === props.path
+  const path = routes.find(route => route.name === props.path.name)?.path
+  if (path === undefined) {
+    return false
+  }
   return (
-    currentRoute.path === props.path ||
-    currentRoute.path.startsWith(`${props.path}/`)
+    currentRoute.name === props.path.name ||
+    currentRoute.path.startsWith(`${path}/`)
   )
 })
 </script>

src/components/Projects/ProjectItem.vue

@@ -11,7 +11,10 @@ defineProps<Props>()
 </script>
 
 <template>
-  <router-link :to="`/projects/${project.id}/edit`" :class="$style.link">
+  <router-link
+    :to="{ name: 'Project', params: { projectId: project.id } }"
+    :class="$style.link"
+  >
     <div :class="$style.container">
       <p :class="$style.name">{{ project.name }}</p>
       <p :class="$style.duration">

src/lib/param.ts

@@ -10,7 +10,7 @@ const toStringIfArray = (s: string | undefined | readonly string[]) =>
 const useParam = (paramName: string): ComputedRef<string> => {
   const route = useRoute()
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return computed(() => toStringIfArray(route.params[paramName])!)
+  return computed(() => toStringIfArray(route.params[paramName]) ?? 'undefined')
 }
 
 export default useParam

src/lib/routeInfo.ts

@@ -1,22 +1,23 @@
 import { computed, ComputedRef, Ref } from 'vue'
+import { RouteLocationNamedRaw } from 'vue-router'
 
 interface routeinfo {
   name: string
-  path: string
+  path: RouteLocationNamedRaw
   icon: string
   description: string
 }
 
 export const routes: routeinfo[] = [
   {
     name: 'Top',
-    path: '/',
+    path: { name: 'Index' },
     icon: 'mdi:apps',
     description: 'ポートフォリオの設定を変更します'
   },
   {
     name: 'Profile',
-    path: '/user',
+    path: { name: 'Profile' },
     icon: 'mdi:account-circle-outline',
     description: '掲載するアカウントや自己紹介を編集します'
   },
@@ -28,13 +29,13 @@ export const routes: routeinfo[] = [
   // },
   {
     name: 'Contests',
-    path: '/contests',
+    path: { name: 'Contests' },
     icon: 'mdi:trophy-outline',
     description: '出場した大会を追加・編集します'
   },
   {
     name: 'Projects',
-    path: '/projects',
+    path: { name: 'Projects' },
     icon: 'mdi:clipboard-file-outline',
     description: 'プロジェクトの期間や説明文を編集します'
   }
@@ -47,7 +48,7 @@ const getMessage = (name: string): routeinfo => {
   // Default Value
   return {
     name: 'Loading',
-    path: '',
+    path: {},
     icon: 'eos-icons:bubble-loading',
     description: 'Loading'
   }

src/pages/Contest.vue

@@ -25,8 +25,11 @@ const contestTeams: ContestTeam[] = (
       <content-header
         icon-name="mdi:trophy-outline"
         :header-texts="[
-          { title: 'Contests', url: '/contests' },
-          { title: contestDetail.name, url: `/contests/${contestId}` }
+          { title: 'Contests', path: { name: 'Contests' } },
+          {
+            title: contestDetail.name,
+            path: { name: 'Contest', params: { contestId: contestId } }
+          }
         ]"
         detail="コンテストの詳細です。"
         :class="$style.header"

src/pages/ContestEdit.vue

@@ -99,9 +99,15 @@ const deleteContest = async () => {
       <content-header
         icon-name="mdi:trophy-outline"
         :header-texts="[
-          { title: 'Contests', url: '/contests' },
-          { title: contestDetail.name, url: `/contests/${contestId}` },
-          { title: 'Edit', url: `/contests/${contestId}/edit` }
+          { title: 'Contests', path: { name: 'Contests' } },
+          {
+            title: contestDetail.name,
+            path: { name: 'Contest', params: { contestId: contestId } }
+          },
+          {
+            title: 'Edit',
+            path: { name: 'ContestEdit', params: { contestId: contestId } }
+          }
         ]"
         detail="コンテストの情報を変更します。"
         :class="$style.header"

src/pages/ContestNew.vue

@@ -76,8 +76,8 @@ const createContest = async () => {
       <content-header
         icon-name="mdi:trophy-outline"
         :header-texts="[
-          { title: 'Contests', url: '/contests' },
-          { title: 'New', url: '/contests/new' }
+          { title: 'Contests', path: { name: 'Contests' } },
+          { title: 'New', path: { name: 'ContestNew' } }
         ]"
         detail="コンテストを作成します。"
         :class="$style.header"

src/pages/ContestTeamEdit.vue

@@ -89,19 +89,28 @@ const deleteContestTeam = async () => {
       <content-header
         icon-name="mdi:trophy-outline"
         :header-texts="[
-          { title: 'Contests', url: '/contests' },
-          { title: contest.name, url: `/contests/${contestId}` },
+          { title: 'Contests', path: { name: 'Contests' } },
+          {
+            title: contest.name,
+            path: { name: 'Contest', params: { contestId: contestId } }
+          },
           {
             title: 'Teams',
-            url: `/contests/${contestId}`
+            path: { name: 'Contest', params: { contestId: contestId } }
           },
           {
             title: contestTeam.name,
-            url: `/contests/${contestId}/teams/${contestTeamId}/edit`
+            path: {
+              name: 'ContestTeamEdit',
+              params: { contestId: contestId, teamId: contestTeamId }
+            }
           },
           {
             title: 'Edit',
-            url: `/contests/${contestId}/teams/${contestTeamId}/edit`
+            path: {
+              name: 'ContestTeamEdit',
+              params: { contestId: contestId, teamId: contestTeamId }
+            }
           }
         ]"
         detail="コンテストチームの情報を変更します。"

src/pages/ContestTeamNew.vue

@@ -70,13 +70,19 @@ const createContestTeam = async () => {
       <content-header
         icon-name="mdi:trophy-outline"
         :header-texts="[
-          { title: 'Contests', url: '/contests' },
-          { title: contest.name, url: `/contests/${contestId}` },
+          { title: 'Contests', path: { name: 'Contests' } },
+          {
+            title: contest.name,
+            path: { name: 'Contest', params: { contestId: contestId } }
+          },
           {
             title: 'Teams',
-            url: `/contests/${contestId}`
+            path: { name: 'Contest', params: { contestId: contestId } }
           },
-          { title: 'New', url: `/contests/${contestId}/teams/new` }
+          {
+            title: 'New',
+            path: { name: 'ContestTeamNew', params: { contestId: contestId } }
+          }
         ]"
         detail="コンテストチームを追加します。"
         :class="$style.header"

src/pages/Contests.vue

@@ -24,7 +24,7 @@ const filteredContests = computed(() =>
   <page-container>
     <content-header
       icon-name="mdi:trophy-outline"
-      :header-texts="[{ title: 'Contests', url: '/contests' }]"
+      :header-texts="[{ title: 'Contests', path: { name: 'Contests' } }]"
       detail="コンテスト情報を変更します。"
       :class="$style.header"
     />

src/pages/Event.vue

@@ -51,8 +51,11 @@ const updateEvent = async () => {
       <content-header
         icon-name="mdi:calendar"
         :header-texts="[
-          { title: 'Events', url: '/events' },
-          { title: event.name, url: `/events/${eventId}` }
+          { title: 'Events', path: { name: 'Events' } },
+          {
+            title: event.name,
+            path: { name: 'Event', params: { id: eventId } }
+          }
         ]"
         detail="イベントの詳細を確認します。"
         :class="$style.header"

src/pages/Events.vue

@@ -41,7 +41,7 @@ const filteredEventsBySearch = computed(() =>
   <page-container>
     <content-header
       icon-name="mdi:calendar"
-      :header-texts="[{ title: 'Events', url: '/events' }]"
+      :header-texts="[{ title: 'Events', path: { name: 'Events' } }]"
       detail="イベントの公開設定を変更します"
       :class="$style.header"
     />

src/pages/Index.vue

@@ -8,7 +8,7 @@ import PageContainer from '/@/components/Layout/PageContainer.vue'
   <page-container>
     <content-header
       icon-name="mdi:apps"
-      :header-texts="[{ title: 'Top', url: '/' }]"
+      :header-texts="[{ title: 'Top', path: { name: 'Index' } }]"
       detail="ポートフォリオの設定を変更します"
       :class="$style.header"
     />

src/pages/Project.vue

@@ -113,9 +113,15 @@ const handleDelete = (id: string) => {
       <content-header
         icon-name="mdi:clipboard-file-outline"
         :header-texts="[
-          { title: 'Projects', url: '/projects' },
-          { title: projectDetail.name, url: `/projects/${projectId}/edit` },
-          { title: 'Edit', url: `/projects/${projectId}/edit` }
+          { title: 'Projects', path: { name: 'Projects' } },
+          {
+            title: projectDetail.name,
+            path: { name: 'Project', params: { projectId: projectId } }
+          },
+          {
+            title: 'Edit',
+            path: { name: 'Project', params: { projectId: projectId } }
+          }
         ]"
         detail="プロジェクトの情報を変更します。"
         :class="$style.header"

src/pages/ProjectNew.vue

@@ -112,8 +112,8 @@ const handleDelete = (id: string) => {
       <content-header
         icon-name="mdi:clipboard-file-outline"
         :header-texts="[
-          { title: 'Projects', url: '/projects' },
-          { title: 'New', url: '/projects/new' }
+          { title: 'Projects', path: { name: 'Projects' } },
+          { title: 'New', path: { name: 'ProjectNew' } }
         ]"
         detail="プロジェクトを作成します。"
         :class="$style.header"

src/pages/Projects.vue

@@ -24,7 +24,7 @@ const filteredProjects = computed(() =>
   <page-container>
     <content-header
       icon-name="mdi:clipboard-file-outline"
-      :header-texts="[{ title: 'Projects', url: '/projects' }]"
+      :header-texts="[{ title: 'Projects', path: { name: 'Projects' } }]"
       detail="プロジェクトを変更します"
       :class="$style.header"
     />

src/pages/User.vue

@@ -18,7 +18,7 @@ const { isMobile } = storeToRefs(useResponsiveStore())
     <div :class="$style.headerContainer">
       <content-header
         icon-name="mdi:account-circle-outline"
-        :header-texts="[{ title: 'Profile', url: '/user' }]"
+        :header-texts="[{ title: 'Profile', path: { name: 'Profile' } }]"
         detail="プロフィールを変更します。"
         :class="$style.header"
       />

src/pages/UserAccountEdit.vue

@@ -84,11 +84,11 @@ const deleteAccount = async () => {
       <content-header
         icon-name="mdi:account-circle-outline"
         :header-texts="[
-          { title: 'Profile', url: '/user' },
-          { title: 'Accounts', url: `/user/accounts` },
+          { title: 'Profile', path: { name: 'Profile' } },
+          { title: 'Accounts', path: { name: 'UserAccounts' } },
           {
             title: 'Edit',
-            url: `/user/accounts/edit`
+            path: { name: 'UserAccountEdit', params: { accountId: accountId } }
           }
         ]"
         detail="アカウント情報を編集します。"

src/pages/UserAccountNew.vue

@@ -71,11 +71,11 @@ const createNewAccount = async () => {
       <content-header
         icon-name="mdi:account-circle-outline"
         :header-texts="[
-          { title: 'Profile', url: '/user' },
-          { title: 'Accounts', url: `/user/accounts` },
+          { title: 'Profile', path: { name: 'Profile' } },
+          { title: 'Accounts', path: { name: 'UserAccounts' } },
           {
             title: 'New',
-            url: `/user/accounts/new`
+            path: { name: 'UserAccountsNew' }
           }
         ]"
         detail="アカウントを登録します。"

src/pages/UserAccounts.vue

@@ -16,8 +16,8 @@ const me = (await apis.getMe()).data
       <content-header
         icon-name="mdi:account-circle-outline"
         :header-texts="[
-          { title: 'Profile', url: '/user' },
-          { title: 'Accounts', url: '/user/accounts' }
+          { title: 'Profile', path: { name: 'Profile' } },
+          { title: 'Accounts', path: { name: 'UserAccounts' } }
         ]"
         detail="アカウント情報を変更します。"
         :class="$style.header"

src/router/index.ts

@@ -18,7 +18,7 @@ const ContestTeamNew = () => import('/@/pages/ContestTeamNew.vue')
 const ContestTeamEdit = () => import('/@/pages/ContestTeamEdit.vue')
 const NotFound = () => import('/@/pages/NotFound.vue')
 
-const routes = [
+export const routes = [
   {
     path: '/',
     name: 'Index',