routerLink

Ola Carlos,

Estou com um projeto em laravel estou a passar uma parte em vuejs,

A minha dúvida e a seguinte:

Como faço para abrir uma outra pagina quando todas as minha routes estão no arquivo web,

Criei uma routes em js/routes/routes.js quando clico no botão a route aparece na barra de endereço mas a pagina não abri.  

<template>

   <div class="table-responsive border-0">

       <table class="table table-dark-gray align-middle p-4 mb-0 table-hover">

           <!-- Table head -->

           <thead>

               <tr>

                   <th scope="col" class="border-0 rounded-start">Título do curso</th>

                   <th scope="col" class="border-0">Total de aulas</th>

                   <th scope="col" class="border-0">Aulas completas</th>

                   <th scope="col" class="border-0 rounded-end">Ação</th>

               </tr>

           </thead>

           <!-- Table body START -->

           <tbody>

               <!-- Table item -->

               <tr>

                   <!-- Table data -->

                   <td>

                       <div class="d-flex align-items-center">

                           <!-- Image -->

                           <div class="w-100px">

                               <img :src=" [image != '' ? image : ('assets/images/courses/4by3/08.jpg')]" class="rounded" :alt="title">

                           </div>

                           <div :class="['mb-0 ms-2']">

                               <!-- Title -->

                               <h6><a href="">{{ title }}</a>

                               </h6>

                               <!-- Info -->

                               <div class="overflow-hidden">

                                   <h6 class="mb-0 text-end">{{ viewCourses }}</h6>

                                   <div :class="['progress progress-sm bg-primary bg-opacity-10']">

                                       <div :class="['progress-bar bg-primary aos']" :role="['progressbar']"

                                           data-aos="slide-right" data-aos-delay="200" data-aos-duration="1000"

                                           data-aos-easing="ease-in-out" style="width: 50%" aria-valuenow="50"

                                           aria-valuemin="0" aria-valuemax="100">

                                       </div>

                                   </div>

                               </div>

                           </div>

                       </div>

                   </td>

                   <!-- Table data -->

                   <td>{{ totalClasses }}</td>

                   <!-- Table data -->

                   <td>{{ completeClasses }}</td>

                   <!-- Table data -->

                   <td>

                       <!--<a href="" class="btn btn-sm btn-primary-soft me-1 mb-1 mb-md-0"><i

                               class="bi bi-play-circle me-1"></i></a>-->

                        <router-link :to="{name: 'ead.modulos'}" :class="['bi bi-play-circle me-1 btn btn-sm btn-primary-soft me-1 mb-1 mb-md-0']">

                            Continue

                        </router-link>

                   </td>

               </tr>

           </tbody>

           <!-- Table body END -->

       </table>

   </div>

</template>

<script>

export default {

    name: 'CourseList',

    props: ['title', 'totalClasses', 'completeClasses', 'image', 'viewCourses']

};

</script>

const routes = [

    {

        path: '/modulos',

        name: 'ead.modulos',

        component: ModulesAndLessons

    }

]

const router = createRouter({

    history: createWebHistory(),

    routes

})

export default router