Merge pull request #197 from traPtitech/fix/router-link

router-linkのto属性でオブジェクトを使用するように

src/components/Contest/ContestTeamListItem.vue

@@ -12,7 +12,10 @@ defineProps<{
   <li :class="$style.container">
     <router-link
       :class="$style.link"
-      :to="`/contests/${contestId}/teams/${contestTeam.id}`"
+      :to="{
+        name: 'ContestTeam',
+        params: { contestId: contestId, teamId: contestTeam.id }
+      }"
     >
       <span :class="$style.name">{{ contestTeam.name }}</span>
       <span v-if="contestTeam.result" :class="$style.result">

src/components/ContestTeam/MemberListItem.vue

@@ -9,7 +9,10 @@ defineProps<{
 
 <template>
   <li>
-    <router-link :class="$style.link" :to="`/users/${member.name}`">
+    <router-link
+      :class="$style.link"
+      :to="{ name: 'User', params: { userId: member.name } }"
+    >
       <user-icon :class="$style.icon" :user-name="member.name" :size="32" />
       <p :class="$style.name">{{ member.name }}</p>
     </router-link>

src/components/Contests/ContestListItem.vue

@@ -9,7 +9,10 @@ defineProps<{
 
 <template>
   <li>
-    <router-link :class="$style.link" :to="`/contests/${contest.id}`">
+    <router-link
+      :class="$style.link"
+      :to="{ name: 'Contest', params: { contestId: contest.id } }"
+    >
       <span :class="$style.name">{{ contest.name }}</span>
       <span :class="$style.date">
         {{ getFullDayWithTimeString(new Date(contest.duration.since)) }} -

src/components/Event/HostnameListItem.vue

@@ -9,7 +9,10 @@ defineProps<{
 
 <template>
   <div>
-    <router-link :class="$style.link" :to="`/users/${hostname.name}`">
+    <router-link
+      :class="$style.link"
+      :to="{ name: 'User', params: { userId: hostname.name } }"
+    >
       <user-icon :class="$style.icon" :user-name="hostname.name" :size="128" />
       <div :class="$style.desc">
         <div :class="$style.name">{{ hostname.name }}</div>

src/components/Events/EventListItem.vue

@@ -14,7 +14,10 @@ const date = computed(() =>
 
 <template>
   <div>
-    <router-link :class="$style.link" :to="`/events/${event.id}`">
+    <router-link
+      :class="$style.link"
+      :to="{ name: 'Event', params: { eventId: event.id } }"
+    >
       <span :class="$style.name">{{ event.name }}</span>
       <span :class="$style.date">({{ date }})</span>
     </router-link>

src/components/Group/AdminListItem.vue

@@ -9,7 +9,10 @@ defineProps<{
 
 <template>
   <li>
-    <router-link :class="$style.link" :to="`/users/${admin.name}`">
+    <router-link
+      :class="$style.link"
+      :to="{ name: 'User', params: { userId: admin.name } }"
+    >
       <user-icon :class="$style.icon" :user-name="admin.name" :size="32" />
       <span :class="$style.name">{{ admin.name }}</span>
     </router-link>

src/components/Group/MemberListItem.vue

@@ -10,7 +10,10 @@ defineProps<{
 
 <template>
   <li>
-    <router-link :class="$style.link" :to="`/users/${member.name}`">
+    <router-link
+      :class="$style.link"
+      :to="{ name: 'User', params: { userId: member.name } }"
+    >
       <user-icon :class="$style.icon" :user-name="member.name" :size="32" />
       <p :class="$style.name">{{ member.name }}</p>
       <p :class="$style.duration">

src/components/Groups/GroupListItem.vue

@@ -8,7 +8,10 @@ defineProps<{
 
 <template>
   <li>
-    <router-link :class="$style.link" :to="`/groups/${group.id}`">
+    <router-link
+      :class="$style.link"
+      :to="{ name: 'Group', params: { groupId: group.id } }"
+    >
       <span :class="$style.name">{{ group.name }}</span>
     </router-link>
   </li>

src/components/Index/GroupList.vue

@@ -44,7 +44,7 @@ const groups = computed(() =>
     <router-link
       v-for="group in groups"
       :key="group.id"
-      :to="`/groups/${group.id}`"
+      :to="{ name: 'Group', params: { groupId: group.id } }"
       :class="$style.link"
     >
       <img

src/components/Layout/BreadCrumbTrail.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import { RouteLocationNamedRaw } from 'vue-router'
 import AIcon from '/@/components/UI/AIcon.vue'
 
 export interface Path {
   name: string
-  link: string
+  link: RouteLocationNamedRaw
 }
 
 defineProps<{

src/components/Layout/PageHeader.vue

@@ -11,7 +11,7 @@ const { isMobile } = storeToRefs(responsiveStore)
 
 <template>
   <header :class="$style.container">
-    <router-link to="/">
+    <router-link :to="{ name: 'Index' }">
       <img
         :src="isMobile ? spLogo : pcLogo"
         alt="traP"

src/components/Project/MemberListItem.vue

@@ -10,7 +10,10 @@ defineProps<{
 
 <template>
   <li>
-    <router-link :class="$style.link" :to="`/users/${member.name}`">
+    <router-link
+      :class="$style.link"
+      :to="{ name: 'User', params: { userId: member.name } }"
+    >
       <user-icon :class="$style.icon" :user-name="member.name" :size="32" />
       <span :class="$style.name">{{ member.name }}</span>
       <span :class="$style.duration">

src/components/Projects/ProjectListItem.vue

@@ -9,7 +9,10 @@ defineProps<{
 
 <template>
   <li>
-    <router-link :class="$style.link" :to="`/projects/${project.id}`">
+    <router-link
+      :class="$style.link"
+      :to="{ name: 'Project', params: { projectId: project.id } }"
+    >
       <span :class="$style.name">{{ project.name }}</span>
       <span :class="$style.date">
         {{ getGroupOrProjectDuration(project.duration) }}

src/components/Search/UserListItem.vue

@@ -9,7 +9,10 @@ defineProps<{
 
 <template>
   <li>
-    <router-link :class="$style.link" :to="`/users/${member.name}`">
+    <router-link
+      :class="$style.link"
+      :to="{ name: 'User', params: { userId: member.name } }"
+    >
       <user-icon :class="$style.icon" :user-name="member.name" :size="32" />
       <p :class="$style.name">{{ member.name }}</p>
     </router-link>

src/components/User/ContestsContainer.vue

@@ -13,7 +13,10 @@ defineProps<Props>()
     <h2 :class="$style.title">実績</h2>
     <ul v-if="contests.length > 0" :class="$style.contests">
       <li v-for="contest in contests" :key="contest.id" :class="$style.contest">
-        <router-link :to="`/contests/${contest.id}`" :class="$style.link">
+        <router-link
+          :to="{ name: 'Contest', params: { contestId: contest.id } }"
+          :class="$style.link"
+        >
           <h4>{{ contest.name }}</h4>
           <div
             v-for="team in contest.teams"

src/lib/param.ts

@@ -5,12 +5,11 @@ const toStringIfArray = (s: string | undefined | readonly string[]) =>
   Array.isArray(s) ? s[0] : s
 
 /**
- * @param paramName - 取得するparam、存在しないものを取得しようとした場合、undefinedが返るので注意
+ * @param paramName - 取得するparam、存在しないものを取得しようとした場合、'undefined'が返るので注意
  */
 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/pages/ContestPage.vue

@@ -19,10 +19,10 @@ onMounted(() => {
 <template>
   <page-container
     :paths="[
-      { name: 'Contests', link: '/contests' },
+      { name: 'Contests', link: { name: 'Contests' } },
       {
         name: contestDetail.name,
-        link: `/contests/${contestId}`
+        link: { name: 'Contest', params: { contestId: contestId } }
       }
     ]"
   >

src/pages/ContestTeamPage.vue

@@ -22,14 +22,17 @@ onMounted(() => {
 <template>
   <page-container
     :paths="[
-      { name: 'Contests', link: '/contests' },
+      { name: 'Contests', link: { name: 'Contests' } },
       {
         name: contestDetail.name,
-        link: `/contests/${contestId}`
+        link: { name: 'Contest', params: { contestId: contestId } }
       },
       {
         name: contestTeamDetail.name,
-        link: `/contests/${contestId}/teams/${teamId}`
+        link: {
+          name: 'ContestTeam',
+          params: { contestId: contestId, teamId: teamId }
+        }
       }
     ]"
   >

src/pages/ContestsPage.vue

@@ -15,7 +15,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <page-container :paths="[{ name: 'Contests', link: '/contests' }]">
+  <page-container :paths="[{ name: 'Contests', link: { name: 'Contests' } }]">
     <div :class="$style.container">
       <page-title>コンテスト一覧</page-title>
       <contest-list :contests="contests" />

src/pages/GroupPage.vue

@@ -19,10 +19,10 @@ onMounted(() => {
 <template>
   <page-container
     :paths="[
-      { name: 'Groups', link: '/groups' },
+      { name: 'Groups', link: { name: 'Groups' } },
       {
         name: groupDetail.name,
-        link: `/groups/${groupId}`
+        link: { name: 'Group', params: { groupId: groupId } }
       }
     ]"
   >

src/pages/GroupsPage.vue

@@ -14,7 +14,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <page-container :paths="[{ name: 'Groups', link: '/groups' }]">
+  <page-container :paths="[{ name: 'Groups', link: { name: 'Groups' } }]">
     <div :class="$style.container">
       <page-title>班一覧</page-title>
       <group-list :groups="groups" />

src/pages/ProjectPage.vue

@@ -19,10 +19,10 @@ onMounted(() => {
 <template>
   <page-container
     :paths="[
-      { name: 'Projects', link: '/projects' },
+      { name: 'Projects', link: { name: 'Projects' } },
       {
         name: projectDetail.name,
-        link: `/projects/${projectId}`
+        link: { name: 'Project', params: { projectId: projectId } }
       }
     ]"
   >

src/pages/ProjectsPage.vue

@@ -15,7 +15,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <page-container :paths="[{ name: 'Projects', link: '/projects' }]">
+  <page-container :paths="[{ name: 'Projects', link: { name: 'Projects' } }]">
     <div :class="$style.container">
       <page-title>プロジェクト一覧</page-title>
       <project-list :projects="projects" />

src/pages/UserPage.vue

@@ -35,10 +35,10 @@ onMounted(() => {
 <template>
   <page-container
     :paths="[
-      { name: 'Users', link: '/users' },
+      { name: 'Users', link: { name: 'UserSearch' } },
       {
         name: userDetail.name,
-        link: `/users/${userId}`
+        link: { name: 'User', params: { userId: userId } }
       }
     ]"
   >