diff --git a/app/javascript/widget/router.js b/app/javascript/widget/router.js
index 418fd9ae6..24f6ade9b 100755
--- a/app/javascript/widget/router.js
+++ b/app/javascript/widget/router.js
@@ -34,8 +34,9 @@ export default createRouter({
           component: () => import('./views/Messages.vue'),
         },
         {
-          path: '/article',
+          path: '/article/:link',
           name: 'article-viewer',
+          props: true,
           component: () => import('./views/ArticleViewer.vue'),
         },
       ],
diff --git a/app/javascript/widget/views/ArticleViewer.vue b/app/javascript/widget/views/ArticleViewer.vue
index 9289d0546..65ca6c501 100644
--- a/app/javascript/widget/views/ArticleViewer.vue
+++ b/app/javascript/widget/views/ArticleViewer.vue
@@ -1,16 +1,16 @@
-<script>
+<script setup>
 import IframeLoader from 'shared/components/IframeLoader.vue';
 
-export default {
-  name: 'ArticleViewer',
-  components: {
-    IframeLoader,
+defineProps({
+  link: {
+    type: String,
+    required: true,
   },
-};
+});
 </script>
 
 <template>
   <div class="bg-white h-full">
-    <IframeLoader :url="$route.query.link" />
+    <IframeLoader :url="link" />
   </div>
 </template>
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index c2a3990a2..c10521a18 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -79,7 +79,7 @@ export default {
       }
       this.$router.push({
         name: 'article-viewer',
-        query: { link: linkToOpen },
+        params: { link: linkToOpen },
       });
     },
     viewAllArticles() {