Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

A rota não redireciona

Referente ao curso Vue3: avançando no framework, no capítulo Bem começado, metade feito e atividade Modificando o estado

por Estudante
| 67.7k xp | 22 posts

Olá, na aula 04 Modificando o estado pede para criar a rota Projetos, mas ao abrir no navegador ela não redireciona corretamente.

src/routes/index.ts:

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
import Tasks from '../pages/Tasks.vue'
import Projetos from '../pages/Projetos.vue'

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        name: 'Tasks',
        component: Tasks
    },
    {
        path: '/projetos',
        name: 'Projetos',
        component: Projetos
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
})

export default router

src/pages/Projetos.vue:

<template>
    <h1>
        Projects
    </h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'Projetos'
})
</script>

Podem me ajudar?

5 respostas
por Vinicios Neves
| 992.8k xp | 1088 posts
Instrutor Tech Lead

Oi, Gabrielle!

Tem algum erro no console?

Você importou o roteador no main.ts? Assim:

import { createApp } from 'vue'
import App from './App.vue'
import '@fortawesome/fontawesome-free/css/all.css'
import roteador from './roteador' // importar aqui

createApp(App)
    .use(roteador) // e usar aqui
    .mount('#app')
por Estudante
| 67.7k xp | 22 posts

esta importado no main tudo certinho e no console nao mostra erro algum.

por Vinicios Neves
| 992.8k xp | 1088 posts
Instrutor Tech Lead

Consegue subir o projeto no github, Gabrielle? Assim eu consigo te ajudar a encontrar o problema :)

por Estudante
| 67.7k xp | 22 posts

Segue o repositório https://github.com/agabitoledo/alura-tracker

solução!
por Vinicios Neves
| 992.8k xp | 1088 posts
Instrutor Tech Lead

Achei, Gabrielle!

Falou adicionar o <router-view />:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

<template>
  <main class="columns is-gapless is-multiline" :class="{'theme-dark': isDarkModeActive}">
    <div class="column is-one-quarter">
      <SideBar @when-changed-theme="changeT" />
    </div>
    <div class="column is-three-quarter content">
      <router-view /><!-- Atenção nessa linha! -->
    </div>
  </main>
</template>

<script lang="ts">
// aqui dentro eu só removi o import do componente Tasks
import { defineComponent } from 'vue';
import SideBar from './components/SideBar.vue'

export default defineComponent({
  name: 'App',
  components: {
    SideBar,
  },
  data() {
    return {
      isDarkModeActive: false
    }
  },
  methods: {
    changeT(isDarkModeActive: boolean) {
      this.isDarkModeActive = isDarkModeActive
    }
  }
});

</script>

<style>
.list {
  padding: 1.25rem;
}

main {
  --bg-primary: #fff;
  --text-primary: #000;
}

main.theme-dark {
  --bg-primary: #2b2b42;
  --text-primary: #ddd;
}

.content {
  background-color: var(--bg-primary);
}
</style>