Componente de ruta de navegación del paquete Vue2
Las migas de pan son un componente de navegación común, generalmente utilizado para mostrar la ubicación de la página actual, lo que permite a los usuarios conocer su ubicación en cualquier momento. Este artículo presentará cómo usar Vue2 para envolver un componente de ruta de navegación.
1. Cree el componente de ruta de navegación
Primero necesitamos crear un componente Vue para implementar la funcionalidad de migas de pan. En este componente, necesitamos recibir una routesmatriz como parámetro y luego generar migas de pan basadas en la información de enrutamiento.
vista
Copiar
<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>
En este componente, usamos un routesatributo props llamado para recibir información de enrutamiento. En la plantilla del componente, usamos v-forla directiva para iterar sobre routesla matriz y generar las migas de pan correspondientes. Usamos router-linkel componente para implementar saltos de enrutamiento y agregamos un separador de barra entre cada ruta de navegación.
2. Usa el componente de migas de pan
Después de crear el componente de ruta de navegación, podemos usarlo en otros componentes. Por ejemplo, podemos App.vueusar el componente de ruta de navegación en el componente para mostrar dónde se encuentra la página actual.
vista
Copiar
<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>
En este ejemplo, App.vueusamos computedel accesorio en el componente para calcular la posición actual de la página. Primero definimos una matriz vacía routes, luego usamos whileun bucle para atravesar la ruta actual y su ruta principal, y las agregamos a routesla matriz a su vez. Finalmente, routespasamos esta matriz como accesorios al componente de migas de pan para generar las migas de pan correspondientes.
3. Resumen
En este artículo, presentamos cómo usar Vue2 para envolver un componente de ruta de navegación. A través de este componente, podemos generar fácilmente varias migas de pan complejas para que los usuarios conozcan su ubicación en cualquier momento. Al mismo tiempo, desarrollar con Vue2 nos permite construir aplicaciones de manera más eficiente.