routerLink
[Finalizado Pelo Aluno]
![Moisés Bumba](https://storage.googleapis.com/eti-academy/users/moises-bumba.jpeg)
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
Olá, Moisés!
Como vai?
O frontend deste projeto, está todo com Vue.js?
Ou, ainda controla as rotas com o Laravel?
![Carlos Ferreira](https://storage.googleapis.com/eti-academy/users/carlos-ferreira.jpg)
ainda estao com laravel
![Moisés Bumba](https://storage.googleapis.com/eti-academy/users/moises-bumba.jpeg)
Qual seria a melhor patica?
![Moisés Bumba](https://storage.googleapis.com/eti-academy/users/moises-bumba.jpeg)
Usar um ou o outro, não tem como combinar ambos (pelo menos não sem gambiarra rsrs)
--
O caminho seria deixar o Vue.js controlar todo o frontend incluindo as rotas.
--
Ou em um tiro mais rápido, deixar o Laravel controlar as rotas, e usar o Vue.js apenas com components;
![Carlos Ferreira](https://storage.googleapis.com/eti-academy/users/carlos-ferreira.jpg)
Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!