feat: use article props

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'),
         },
       ],

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>

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() {