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

to属性でオブジェクトを使用するように変更
traPtitech · Jul 12, 2024 · b97d71a · b97d71a
2 parents 19d53e6 + 2f5101d
commit b97d71a
Show file tree

Hide file tree

Showing 22 changed files with 51 additions and 24 deletions.
diff --git a/src/components/Contest/ContestTeamItem.vue b/src/components/Contest/ContestTeamItem.vue
@@ -17,7 +17,10 @@ const userNames = computed(() =>
 
 <template>
   <router-link
-    :to="`/contests/${contestId}/teams/${contestTeam.id}/edit`"
+    :to="{
+      name: 'ContestTeamEdit',
+      params: { contestId: contestId, teamId: contestTeam.id }
+    }"
     :class="$style.link"
   >
     <div :class="$style.container">

diff --git a/src/components/Contest/ContestTeams.vue b/src/components/Contest/ContestTeams.vue
@@ -32,7 +32,7 @@ const filteredContestTeams = computed(() =>
       </div>
       <div>
         <router-link
-          :to="`/contests/${contestId}/teams/new`"
+          :to="{ name: 'ContestTeamNew', params: { contestId: contestId } }"
           :class="$style.link"
         >
           <base-button type="primary" icon="mdi:plus">New</base-button>

diff --git a/src/components/Contests/ContestItem.vue b/src/components/Contests/ContestItem.vue
@@ -11,7 +11,10 @@ defineProps<Props>()
 </script>
 
 <template>
-  <router-link :to="`/contests/${contest.id}`" :class="$style.link">
+  <router-link
+    :to="{ name: 'Contest', params: { contestId: contest.id } }"
+    :class="$style.link"
+  >
     <div :class="$style.container">
       <p :class="$style.name">{{ contest.name }}</p>
       <p :class="$style.duration">

diff --git a/src/components/Events/EventItem.vue b/src/components/Events/EventItem.vue
@@ -53,7 +53,10 @@ onUnmounted(() => {
 
 <template>
   <div :class="$style.container">
-    <router-link :to="`events/${event.id}`" :class="$style.link">
+    <router-link
+      :to="{ name: 'Event', params: { id: event.id } }"
+      :class="$style.link"
+    >
       <p :class="$style.name">{{ event.name }}</p>
       <p :class="$style.duration">
         <icon name="mdi:calendar" />

diff --git a/src/components/Layout/PageHeader.vue b/src/components/Layout/PageHeader.vue
@@ -20,7 +20,7 @@ const { isMobile } = storeToRefs(useResponsiveStore())
     <button v-if="isMobile" @click="emit('toggleNavigationBar')">
       <icon name="mdi:menu" />
     </button>
-    <router-link to="/">
+    <router-link :to="{ name: 'Index' }">
       <img
         src="/@/assets/traP_logo_blue.svg"
         alt="traP"

diff --git a/src/components/Projects/ProjectItem.vue b/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">

diff --git a/src/components/User/UserProfileDesktop.vue b/src/components/User/UserProfileDesktop.vue
@@ -22,7 +22,7 @@ defineProps<Props>()
       </div>
       <div :class="$style.accounts">
         <user-accounts :accounts="user.accounts" />
-        <router-link to="/user/accounts" :class="$style.link">
+        <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
           <base-button icon="mdi:account">Edit</base-button>
         </router-link>
       </div>

diff --git a/src/components/User/UserProfileMobile.vue b/src/components/User/UserProfileMobile.vue
@@ -23,7 +23,7 @@ defineProps<Props>()
     </div>
     <div :class="$style.accounts">
       <user-accounts :accounts="user.accounts" />
-      <router-link to="/user/accounts" :class="$style.link">
+      <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
         <base-button icon="mdi:account">Edit</base-button>
       </router-link>
     </div>

diff --git a/src/components/UserAccounts/AccountItem.vue b/src/components/UserAccounts/AccountItem.vue
@@ -11,7 +11,10 @@ defineProps<Props>()
 </script>
 
 <template>
-  <router-link :to="`/user/accounts/${account.id}/edit`" :class="$style.link">
+  <router-link
+    :to="{ name: 'UserAccountsEdit', params: { accountId: account.id } }"
+    :class="$style.link"
+  >
     <div :class="$style.container">
       <div :class="$style.displayNameContainer">
         <p :class="$style.displayName">{{ account.displayName }}</p>

diff --git a/src/pages/Contest.vue b/src/pages/Contest.vue
@@ -31,7 +31,10 @@ const contestTeams: ContestTeam[] = (
         detail="コンテストの詳細です。"
         :class="$style.header"
       />
-      <router-link :to="`/contests/${contestId}/edit`" :class="$style.link">
+      <router-link
+        :to="{ name: 'ContestEdit', params: { contestId: contestId } }"
+        :class="$style.link"
+      >
         <base-button type="primary" icon="mdi:pencil">Edit</base-button>
       </router-link>
     </div>
@@ -70,7 +73,7 @@ const contestTeams: ContestTeam[] = (
       </section>
     </div>
 
-    <router-link to="/contests" :class="$style.link">
+    <router-link :to="{ name: 'Contests' }" :class="$style.link">
       <base-button
         :class="$style.backButton"
         type="secondary"

diff --git a/src/pages/ContestEdit.vue b/src/pages/ContestEdit.vue
@@ -131,7 +131,10 @@ const deleteContest = async () => {
     <delete-form target="コンテスト" @delete="open" />
 
     <div :class="$style.buttonContainer">
-      <router-link :to="`/contests/${contestId}`" :class="$style.link">
+      <router-link
+        :to="{ name: 'Contest', params: { contestId: contestId } }"
+        :class="$style.link"
+      >
         <base-button
           :class="$style.backButton"
           type="secondary"

diff --git a/src/pages/ContestNew.vue b/src/pages/ContestNew.vue
@@ -114,7 +114,7 @@ const createContest = async () => {
       </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
-      <router-link to="/contests" :class="$style.link">
+      <router-link :to="{ name: 'Contests' }" :class="$style.link">
         <base-button
           :class="$style.backButton"
           type="secondary"

diff --git a/src/pages/ContestTeamEdit.vue b/src/pages/ContestTeamEdit.vue
@@ -136,7 +136,10 @@ const deleteContestTeam = async () => {
     <delete-form target="コンテストチーム" @delete="open" />
 
     <div :class="$style.buttonContainer">
-      <router-link :to="`/contests/${contestId}`" :class="$style.link">
+      <router-link
+        :to="{ name: 'Contest', params: { contestId: contestId } }"
+        :class="$style.link"
+      >
         <base-button type="secondary" icon="mdi:arrow-left">Back</base-button>
       </router-link>
       <base-button

diff --git a/src/pages/ContestTeamNew.vue b/src/pages/ContestTeamNew.vue
@@ -109,7 +109,10 @@ const createContestTeam = async () => {
     </form>
 
     <div :class="$style.buttonContainer">
-      <router-link :to="`/contests/${contestId}`" :class="$style.link">
+      <router-link
+        :to="{ name: 'Contest', params: { contestId: contestId } }"
+        :class="$style.link"
+      >
         <base-button type="secondary" icon="mdi:arrow-left">Back</base-button>
       </router-link>
       <base-button

diff --git a/src/pages/Contests.vue b/src/pages/Contests.vue
@@ -37,7 +37,7 @@ const filteredContests = computed(() =>
         />
       </div>
       <div>
-        <router-link to="/contests/new" :class="$style.link">
+        <router-link :to="{ name: 'ContestNew' }" :class="$style.link">
           <base-button type="primary" icon="mdi:trophy">New</base-button>
         </router-link>
       </div>

diff --git a/src/pages/Event.vue b/src/pages/Event.vue
@@ -115,7 +115,7 @@ const updateEvent = async () => {
     </div>
 
     <div :class="$style.buttonContainer">
-      <router-link to="/events" :class="$style.link">
+      <router-link :to="{ name: 'Events' }" :class="$style.link">
         <base-button
           :class="$style.backButton"
           type="secondary"

diff --git a/src/pages/Project.vue b/src/pages/Project.vue
@@ -160,7 +160,7 @@ const handleDelete = (id: string) => {
     </form>
 
     <div :class="$style.buttonContainer">
-      <router-link :to="`/projects/${projectId}`" :class="$style.link">
+      <router-link :to="{ name: 'Projects' }" :class="$style.link">
         <base-button
           :class="$style.backButton"
           type="secondary"

diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
@@ -165,7 +165,7 @@ const handleDelete = (id: string) => {
       </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
-      <router-link to="/projects" :class="$style.link">
+      <router-link :to="{ name: 'Projects' }" :class="$style.link">
         <base-button
           :class="$style.backButton"
           type="secondary"

diff --git a/src/pages/Projects.vue b/src/pages/Projects.vue
@@ -37,7 +37,7 @@ const filteredProjects = computed(() =>
         />
       </div>
       <div>
-        <router-link to="/projects/new" :class="$style.link">
+        <router-link :to="{ name: 'ProjectNew' }" :class="$style.link">
           <base-button type="primary" icon="mdi:clipboard-file">
             New</base-button
           >

diff --git a/src/pages/UserAccountEdit.vue b/src/pages/UserAccountEdit.vue
@@ -126,7 +126,7 @@ const deleteAccount = async () => {
     <delete-form target="アカウント" @delete="open" />
 
     <div :class="$style.buttonContainer">
-      <router-link to="/user/accounts" :class="$style.link">
+      <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
         <base-button
           :class="$style.backButton"
           type="secondary"

diff --git a/src/pages/UserAccountNew.vue b/src/pages/UserAccountNew.vue
@@ -111,7 +111,7 @@ const createNewAccount = async () => {
       </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
-      <router-link to="/user/accounts" :class="$style.link">
+      <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
         <base-button
           :class="$style.backButton"
           type="secondary"

diff --git a/src/pages/UserAccounts.vue b/src/pages/UserAccounts.vue
@@ -22,7 +22,7 @@ const me = (await apis.getMe()).data
         detail="アカウント情報を変更します。"
         :class="$style.header"
       />
-      <router-link to="/user/accounts/new" :class="$style.link">
+      <router-link :to="{ name: 'UserAccountsNew' }" :class="$style.link">
         <base-button type="primary" icon="mdi:account">New</base-button>
       </router-link>
     </div>
@@ -32,7 +32,7 @@ const me = (await apis.getMe()).data
       </li>
     </ul>
 
-    <router-link to="/user" :class="$style.link">
+    <router-link :to="{ name: 'Profile' }" :class="$style.link">
       <base-button
         :class="$style.backButton"
         type="secondary"