Componente de breadcrumb do pacote Vue2
Breadcrumbs são um componente de navegação comum, geralmente usado para exibir a localização da página atual, permitindo que os usuários saibam sua localização a qualquer momento. Este artigo apresentará como usar o Vue2 para agrupar um componente breadcrumb.
1. Crie o componente breadcrumb
Primeiro precisamos criar um componente Vue para implementar a funcionalidade breadcrumbs. Neste componente, precisamos receber um routesarray como parâmetro e então gerar breadcrumbs com base nas informações de roteamento.
ver
cópia de
<template>
<div class="breadcrumb">
<ul>
<li v-for="(route, index) in routes" :key="route.path">
<router-link :to="route.path">{
{ route.meta.title }}</router-link>
<span v-if="index !== routes.length - 1">/</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Breadcrumb',
props: {
routes: {
type: Array,
required: true,
default: () => []
}
}
}
</script>
Neste componente, usamos um routesatributo props chamado para receber informações de roteamento. No template do componente, usamos v-fora diretiva para iterar sobre routeso array e gerar o breadcrumb correspondente. Usamos router-linko componente para implementar saltos de roteamento e adicionamos uma barra separadora entre cada trilha de navegação.
2. Use o componente breadcrumb
Após criar o componente breadcrumb, podemos utilizá-lo em outros componentes. Por exemplo, podemos App.vueusar o componente breadcrumb no componente para mostrar onde a página atual está localizada.
ver
cópia de
<template>
<div>
<breadcrumb :routes="routes"></breadcrumb>
<router-view></router-view>
</div>
</template>
<script>
import Breadcrumb from './Breadcrumb.vue'
export default {
name: 'App',
components: {
Breadcrumb
},
computed: {
routes() {
const routes = []
let route = this.$route
while (route) {
routes.unshift(route)
route = route.parent
}
return routes
}
}
}
</script>
Neste exemplo, App.vueusamos computedo prop no componente para calcular a posição atual da página. Primeiro definimos um array vazio routes, então usamos whileum loop para percorrer a rota atual e sua rota pai, e os adicionamos ao routesarray por sua vez. Por fim, routespassamos esse array como props para o componente breadcrumbs para gerar o breadcrumbs correspondente.
3. Resumo
Neste artigo, apresentamos como usar o Vue2 para agrupar um componente breadcrumb. Por meio desse componente, podemos gerar facilmente vários breadcrumbs complexos, permitindo que os usuários saibam sua localização a qualquer momento. Ao mesmo tempo, desenvolver com Vue2 nos permite criar aplicativos com mais eficiência.