Use useRoute() instead $route

craftcms · Nov 28, 2024 · d54bcfb · d54bcfb
1 parent 8a43cd0
commit d54bcfb
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/frontend/components/navigation.vue b/frontend/components/navigation.vue
@@ -1,10 +1,14 @@
 <script setup>
+const route = useRoute()
+
 defineProps({
   pages: {
     type: Array,
     default: () => []
   }
 })
+
+const isCurrentPage = (path) => route.path === path
 </script>
 
 <template>
@@ -15,7 +19,7 @@ defineProps({
           to="/blog" 
           class="block p-2 hover:underline text-red-600 hover:text-red-600"
           active-class="text-red-600"
-          :aria-current="$route.path === '/blog' ? 'page' : null"
+          :aria-current="isCurrentPage('/blog') ? 'page' : null"
         >
           Blog
         </NuxtLink>
@@ -25,7 +29,7 @@ defineProps({
           to="/guestbook" 
           class="block p-2 hover:underline text-red-600 hover:text-red-600"
           active-class="text-red-600"
-          :aria-current="$route.path === '/guestbook' ? 'page' : null"
+          :aria-current="isCurrentPage('/guestbook') ? 'page' : null"
         >
           Guestbook
         </NuxtLink>
@@ -35,7 +39,7 @@ defineProps({
           :to="`/${page.uri}`" 
           class="block p-2 hover:underline text-red-600 hover:text-red-600"
           active-class="text-red-600"
-          :aria-current="$route.path === `/${page.uri}` ? 'page' : null"
+          :aria-current="isCurrentPage(`/${page.uri}`) ? 'page' : null"
         >
           {{ page.title }}
         </NuxtLink>