3
respostas

Include template

No angularJs temos um recurso chamado "ng-include" ele renderizar um HTML externo na minha tela estou fazendo utilizando "tabs" ou seja ele clica no Endereço e renderizar a tela de endereço e se clicar na situação renderiza a tela de situação.

Meu dilema está em qual recurso do Vue.js posso utilizar para substituir o "a" e quando o usuário clicar renderizar o componente que ele clicou.

O primeiro passo que quero resolver é só a renderização do componente certo.

<template>
    <div class="animated fadeInRight">
        <div class="row">
            <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                    <a class="nav-link" href="#">Endereco</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Situacao</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contato</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script src="./aluno.js"></script>
<style src="./aluno.css"></style>
3 respostas

Fala ai Fábio, tudo bem? O ng-include do AngularJS seria equivalente ao slot do Vue:

https://br.vuejs.org/v2/guide/components-slots.html

Essa doc explica certinho como funcione e exemplos de utilização.

Espero ter ajudado.

Obrigado Matheus mais uma vez pela sua resposta.

Estudei mais afundo o VueRouter acha que o " Nested Routes" também possa ser uma solução?

Fala Fabio, não sei bem o que tu quer fazer, mas, o Nested Routes pode ser uma solução também.

Talvez até para o seu caso, você precise apenas de rotas e nem chegaria ao ponto de Nested Routes, apenas adicionar um roteamento seria o suficiente para clicar nos link's e renderizar X páginas (componentes).

Como eu gosto de dizer: "Na maioria das vezes vai haver mais de uma solução para dado um problema".

Espero ter ajudado.