PrimeVue menu not redirecting to view pages

Question

I have a vue3 typescript application using PrimeVue. I am using a PrimeVue menu but it isn't working as expected. I added the page url to the url property but it isn't redirecting as I thought it would. Below is an excerpt of my code:

<script setup lang="ts">
import { ref } from 'vue';
import Menubar from 'primevue/menubar'
import Menu from 'primevue/menu';

    const items = ref([
        {  
            items: [{
                label: 'Search',
                icon: 'pi pi-search',
                url: './LeftNavigation.vue'
            },
            {
                label: 'View Completed',
                icon: 'pi pi-check-square', 
                url: '../views/CompletedTasks.vue'
            },
            {
                label: 'Delete',
                icon: 'pi pi-trash',
                url: '../views/DeletedTasks.vue'
            },
            {
                label: 'View Archived',
                icon: 'pi pi-cloud-upload',
                url: '../views/Archived.vue'
            },
            {
                label: 'View All',
                icon: 'pi pi-list',
                url: '../views/AllTask.vue'
            },                                                                
        ]},
    ]);
    </script>
    <template>
       <Menu :model="items" />
    </template>

Here's my github code

Answer 1

The url of your links should not point to the source code (e.g. ../views/CompletedTasks.vue) but to the address of this page that you would use in your browser to display it, e.g. /CompletedTasks.