Como configurar o vue router 4 usando javascript de modo que o MenuPrincipal.vue usando um router-link abara o conteúdo na Content.vue

Olá

Sou novo na área de frontend e tive dificuldades para configurar o Vue Router 4 e vincular o componente MenuPrincipal.vue ao componente Content.vue usando router-link:

Certifique-se de ter o Vue Router instalado em seu projeto. Se você ainda não o instalou, execute o seguinte comando em seu terminal:

npm install vue-router@4

Crie um arquivo router.js (ou qualquer outro nome que você preferir) na pasta do seu projeto. Este arquivo será responsável por configurar o Vue Router. No router.js, adicione o seguinte código:

import { createRouter, createWebHistory } from 'vue-router';
import MenuPrincipal from './components/MenuPrincipal.vue';
import Content from './components/Content.vue';


const routes = [
{
  path: '/',
  name: 'MenuPrincipal',
  component: MenuPrincipal
},
{
  path: '/conteudo',
  name: 'Content',
  component: Content
}
];


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


export default router;

Certifique-se de ter os componentes MenuPrincipal.vue e Content.vue criados em suas respectivas pastas dentro do projeto.

Agora, você precisa garantir que o Vue Router seja usado em sua instância principal do Vue. Normalmente, isso é feito no arquivo main.js. Adicione o seguinte código ao main.js:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';


const app = createApp(App);
app.use(router);
app.mount('#app');

Agora que o Vue Router está configurado, você pode usar o componente router-link para navegar entre as rotas. No componente MenuPrincipal.vue, onde você deseja que o link esteja presente, adicione o seguinte código:

<template>
<div>
  <router-link to="/conteudo">Abrir conteúdo</router-link>
</div>
</template>

No componente Content.vue, onde você deseja exibir o conteúdo vinculado ao link, você pode acessá-lo usando o slot padrão. Adicione o seguinte código ao Content.vue:

<template>
<div>
  <router-view></router-view>
</div>
</template>

Agora, quando você clicar no link "Abrir conteúdo" no componente MenuPrincipal.vue, o conteúdo será exibido no componente Content.vue. Certifique-se de que os nomes dos componentes e as rotas estejam corretos de acordo com sua estrutura de projeto.