refactor: improve route

Author: sxzz

pages/hi/[id].vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useUserStore } from '~/stores/user'
+
 const route = useRoute()
 const user = useUserStore()
 const name = route.params.id
@@ -9,35 +10,24 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div>
-    <h3>
-      Hi,
-    </h3>
-    <div>
-      {{ name }}!
-    </div>
+  <div m-3>
+    <h3>Hi, {{ name }}!</h3>
 
     <template v-if="user.otherNames.length">
-      <p>
-        <span>Also as known as:</span>
-        <ul>
-          <li v-for="otherName in user.otherNames" :key="otherName">
-            <router-link :to="`/hi/${otherName}`" replace>
-              {{ otherName }}
-            </router-link>
-          </li>
-        </ul>
-      </p>
+      <span>Also as known as:</span>
+      <ul>
+        <li v-for="otherName in user.otherNames" :key="otherName">
+          <router-link :to="`/hi/${otherName}`" replace>
+            {{ otherName }}
+          </router-link>
+        </li>
+      </ul>
     </template>
 
     <Counter />
 
     <div>
-      <NuxtLink
-        to="/"
-      >
-        Back
-      </NuxtLink>
+      <NuxtLink to="/">Back</NuxtLink>
     </div>
   </div>
 </template>