O código que aparece neste artigo pode ser copiado e usado diretamente
Na página inicial, crie a página tab1.vue na pasta do componente.
<modelo>
<div class="tabs">
<router-link class="tab-item" tag="div" to="/Page1">página1</router-link>
<router-link class="tab-item" tag="div" to="/Page2">página2</router-link>
<router-link class="tab-item" tag="div" to="/Page3">página3</router-link>
</div>
</template>
<roteiro>
exportar padrão {};
</script>
<estilo lang="menos">
.tabs{
exibição: flexível;
altura: 60px;
largura: 100%;
cor de fundo: #e5e5e5;
cursor: ponteiro;
div {
margem direita: 20px;
}
}
</estilo>
Crie o arquivo tabs1 no arquivo de visualização para criar três páginas vue, ou seja, page1.vue, page2.vue e page3.vue.
//O conteúdo pode ser o que você quiser
<modelo>
<divclass="">
Página 1
Esta é a barra de guias alternada através do roteamento
</div>
</template>
<roteiro>
padrão de exportação {
nome: '',
componentes: {
}
}
</script>
Apresente essas três rotas no arquivo do roteador
importar Vue de 'vue'
importar VueRouter de 'vue-router'
importar Página1 de '../views/Tabs1/Page1.vue'
// importa a página1 de '../views/Tab2/Page.vue'
Vue.use(VueRouter)
rotas const = [
{
caminho: '/Página1',
nome: 'Página1',
componente: Página1
},
{
caminho:'/página2',
componente: () => importar('@/views/Tabs1/Page2')
},
{
caminho: '/página3',
componente: () => importar('@/views/Tabs1/Page3')
}
]
roteador const = novo VueRouter({
modo: 'histórico',
base: process.env.BASE_URL,
rotas
})
exportar roteador padrão
Finalmente, introduza o arquivo tab1 em app.vue
<modelo>
<div>
<Tab></Tab>
<visualização do roteador></visualização do roteador>
</div>
</template>
<roteiro>
//trocando o roteamento de guias
importar guia de './components/tab1.vue'
// importar guia de './components/tab2.vue'
padrão de exportação {
dados() {
retornar {
}
},
componentes:{
Aba
}
}
</script>
<estilo lang="menos">
</estilo>