Alterar conteúdo router-view por outro html ao clicar em uma rota

Fala aí Trocatti, tudo bem? Não entendi muito bem o problema, consegue me passar mais detalhes? O que seria "trocar o conteúdo html"? Você precisa fazer algo a mais além de renderizar componentes diferentes para cada rota?

Fico no aguardo.

Já conversamos no slack do vuejs Brasil. Mas vou deixar registrado caso alguém tenha a mesma dúvida...

Pergunta:

Seguinte, no App.vueeu tenho o router-viewe uma page chamado deHome.vue.Nesta páginaHome.vue,tenho um componente chamado deRoutes.vueque faz uma interação noroutes.jse gera um card bootstrap para cada rota especificada noRouter. O que está acontecendo é que ao clicar em um desses cards, ao invés do conteúdo da rota ser apresentado em uma nova página, está apresentado em cima do card clicado. Então, eu queria que o conteúdo doHome.vuesaísse e o conteúdo do card clicado ocupasse a tela inteira.

Solução:

Matheus Castiglioni: O que você precisa fazer é colocar orouter-viewno seu component principal umApp.vue,por exemplo, então dentro da rota root, você renderiza os cards com as rotas assim quando você clicar em alguma rota, uma rota de clientes, por exemplo, ele vai mudar a página inteira.

Resumo:

Trocatti: Eu não preciso ficar importando o componenteHome.vuenoApp.vuee sim só importar ele no router.js.Na minha cabeça, eu sempre tinha que importar o componenteHome.vueque tem os cards noApp.vue.

Código:

router.js

const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home.vue');
export default new Router({ 
routes: [
            { path: '', name: 'anything', component: Home, show: false }
    ]
})

App.vue

<template>
  <div id="app">
    <div class="container h-100">
      <transition name="slide">
        <router-view></router-view>
      </transition>
    </div>
    <Footer />
  </div>
</template>

Boa Trocatti, sempre que precisar não deixe de criar suas dúvidas ou me chame no Slack haha.

Abraços e bons estudos.