feature: Add vue-router

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "colorthief": "^2.4.0",
         "tinycolor2": "^1.6.0",
-        "vue": "^3.3.4"
+        "vue": "^3.3.4",
+        "vue-router": "^4.2.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
@@ -541,6 +542,11 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
@@ -2299,6 +2305,20 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
+      "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "colorthief": "^2.4.0",
     "tinycolor2": "^1.6.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

src/App.vue

@@ -32,13 +32,5 @@ getPage()
 </script>
 
 <template>
-    <div v-if="isPokemon">
+    <router-view />
-        <Pokedex :pokemonId="pokemonId" />
-    </div>
-    <div v-if="isAbout">
-        <About />
-    </div>
-    <div v-if="is404">
-        <Page404 />
-    </div>
 </template>

src/components/Footer.vue

@@ -1,8 +1,10 @@
 <template>
     <div class="flex flex-col lg:flex-row items-center justify-center w-full gap-2">
         <div class="flex gap-4 justify-center items-center">
-            <a href="/1">Pokedex</a>
+            <a :href="$router.resolve({ name: 'pokemon', params: { id: 1 } }).href">
-            <a href="/about">About</a>
+                Pokedex
+            </a>
+            <router-link :to="{ name: 'about' }">About</router-link>
             <a href="https://dribbble.com/shots/2859891--025-Pikachu" target="_blank">Inspiration</a>
             <a href="https://dribbble.com/shots/2859891--025-Pikachu" target="_blank">Source Code</a>
         </div>

src/components/Pages.vue

@@ -1,6 +1,9 @@
 <script setup>
 
 import { ref, defineProps } from 'vue'
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 const props = defineProps({
     numberPadding: Number,
@@ -13,8 +16,7 @@ function calculatePageNumbers() {
 
     const createArray = n => Array.from({ length: n }, (_, i) => i + 1);
 
-    const url = window.location.href;
+    const pokemonId = parseInt(route.params.id);
-    const pokemonId = parseInt(url.split("/").slice(-1)[0]);
 
     const highestPokemon = 1005;
     const numberPadding = props.numberPadding;
@@ -55,7 +57,7 @@ calculatePageNumbers()
 
 <template>
     <div v-for="number in pokedexNumbers" class="cursor-pointer">
-        <a :href="'/' + number">
+        <a :href="$router.resolve({ name: 'pokemon', params: { id: number } }).href">
             <span v-if="number === activeId" class="font-bold text-lg">{{ number }}</span>
             <span v-else>{{ number }}</span>
         </a>

src/components/Pokedex.vue

@@ -1,6 +1,9 @@
 <script setup>
 
 import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 import Pages from './Pages.vue'
 import Description from './Description.vue'
@@ -13,14 +16,9 @@ import Footer from './Footer.vue'
 import ColorThief from 'colorthief'
 import tinycolor from 'tinycolor2'
 
-const props = defineProps({
-    pokemonId: Number,
-});
-
 const pokemon = ref(null)
 const pokemonImage = ref(null)
 const pokemonSpecies = ref(null)
-const pokemonId = ref(null)
 
 const darkColor = ref(null)
 const lightColor = ref(null)
@@ -51,7 +49,8 @@ function getPokemonColors(image) {
 }
 
 function getPokemonData() {
-    fetch(`https://pokeapi.co/api/v2/pokemon/${props.pokemonId}`)
+
+    fetch(`https://pokeapi.co/api/v2/pokemon/${route.params.id}`)
         .then((response) => response.json())
         .then((json) => pokemon.value = json)
         .then(() => {
@@ -59,7 +58,7 @@ function getPokemonData() {
             getPokemonColors(pokemonImage.value)
         })
 
-    fetch(`https://pokeapi.co/api/v2/pokemon-species/${props.pokemonId}`)
+    fetch(`https://pokeapi.co/api/v2/pokemon-species/${route.params.id}`)
         .then((response) => response.json())
         .then((json) => pokemonSpecies.value = json);
 

src/main.js

@@ -1,5 +1,13 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+
+const app = createApp(App);
+
+app.use(router);
+
+router.isReady().then(() => {
+    app.mount('#app');
+})

src/router.js

@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Pokedex from "./components/Pokedex.vue";
+import Page404 from "./components/404.vue";
+import About from "./components/About.vue";
+
+const routes = [
+  { path: "/", component: About, name: "home" },
+  { path: "/pokemon/:id", component: Pokedex, name: "pokemon" },
+  { path: "/about", component: About, name: "about" },
+  { path: "/:catchAll(.*)", component: Page404, name: "404" },
+];
+
+const history = createWebHistory();
+
+const router = createRouter({
+  history,
+  routes,
+});
+
+export default router;