How do I make dynamic routing work in Vue? - vue.js

Question

I got a project and when I use :to, my dynamic routes dont work..I also can't seem to pass params. The buttons supposed to be used as dynamic routes are declared in the v-for loop. I am using Quasar CLI / Vue3.
It'd be really awesome if some of you had an insight as to why this does not work. I get no errors, simply, when I hover over the button it shows no url as it normally would in a browser.
The view displaying items:
<template>
<div class="projects">
<div class="text-h3 project-title">
Favourite Projects <q-icon name="star" color="yellow" />
</div>
</div>
<div class="project-container">
<div class="q-pa-md project-card">
<q-card class="my-card single-projects no-shadow no-border-radius">
<q-img
src="https://res.cloudinary.com/practicaldev/image/fetch/s--9yBkqrjS--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nphrgz8yfnjylrwfr0yl.png"
>
<div class="absolute-bottom">
<div class="text-h6">
Damn good project
<q-icon name="star" color="yellow" />
</div>
<div class="text-subtitle2">by Big Boi</div>
</div>
</q-img>
<q-card-actions class="project-btns">
<q-btn
unelevated
size="md"
class="open-btn no-border-radius dropdown-btn"
>Open</q-btn
>
<q-btn
flat
no-caps
unelevated
size="md"
class="delete-btn no-border-radius"
color="red"
#click="confirm = true"
>Delete</q-btn
>
<q-dialog v-model="confirm" persistent class="dialog no-shadow">
<q-card>
<q-card-section class="row items-center">
<span class="q-ml-sm"
>Are you sure you want to delete this project?</span
>
</q-card-section>
<q-card-actions align="center">
<q-btn
flat
no-caps
label="Cancel"
color="black"
class="no-border-radius"
v-close-popup
/>
<q-btn
flat
no-caps
label="Delete"
color="red"
class="no-border-radius"
v-close-popup
/>
</q-card-actions>
</q-card>
</q-dialog>
</q-card-actions>
</q-card>
</div>
</div>
<div class="projects">
<div class="text-h3 project-title">All Projects</div>
</div>
<div v-for="item in items" :key="item.project" class="project-container">
<div class="q-pa-md project-card">
<q-card class="my-card single-projects no-shadow no-border-radius">
<q-img
src="https://res.cloudinary.com/practicaldev/image/fetch/s--9yBkqrjS--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nphrgz8yfnjylrwfr0yl.png"
>
<div class="absolute-bottom">
<div class="text-h6">{{ item.project }}</div>
<div class="text-subtitle2">by {{ item.author }}</div>
</div>
</q-img>
<q-card-actions class="project-btns">
<q-btn
:to="{
name: 'project',
params: {
project: item.project,
},
}"
unelevated
size="md"
class="open-btn no-border-radius dropdown-btn"
>Open
</q-btn>
<q-btn
flat
no-caps
unelevated
size="md"
class="delete-btn no-border-radius"
color="red"
#click="confirm = true"
>Delete</q-btn
>
<q-dialog v-model="confirm" persistent class="dialog no-shadow">
<q-card>
<q-card-section class="row items-center">
<span class="q-ml-sm"
>Are you sure you want to delete this project?</span
>
</q-card-section>
<q-card-actions align="center">
<q-btn
flat
no-caps
label="Cancel"
color="black"
class="no-border-radius"
v-close-popup
/>
<q-btn
flat
no-caps
label="Delete"
color="red"
class="no-border-radius"
v-close-popup
/>
</q-card-actions>
</q-card>
</q-dialog>
</q-card-actions>
</q-card>
</div>
</div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
name: 'myProjects',
setup() {
return {
confirm: ref(false),
items: [
{ project: 'good project', id: '302a49g8Aa43', author: 'Josh' },
{ project: 'okay fine', id: '65at9g847a11', author: 'Tray' },
{ project: 'let me see', id: '538s3fg4782f', author: 'Martin' },
],
};
},
};
</script>
This is also my router where I do the routing:
{
path: '/project/:id',
props: true,
component: () => import('layouts/SingleProLayout.vue'),
children: [{ path: '', component: () => import('pages/Project.vue') }],
},

Answer 1

Try wrapping the q-btn inside a router-link https://router.vuejs.org/api/