¿Qué es el enrutamiento vue.js?
El enrutamiento se refiere al proceso en el que un enrutador recibe un paquete de datos desde una interfaz, lo dirige según la dirección de destino del paquete de datos y lo reenvía a otra interfaz.
El enrutamiento de Vue.js nos permite acceder a diferentes contenidos a través de diferentes URL.
Vue.js se puede utilizar para implementar aplicaciones web de una sola página con múltiples vistas (aplicación web de una sola página, SPA).
El enrutamiento de Vue.js necesita cargar la biblioteca vue-router.
Pero cuando se usa el enrutamiento, la URL también cambia. Cuando los usuarios navegan a una página web, pueden copiarla o marcarla como favorita. la página actual. La URL se proporciona a otros. Este método es amigable para los motores de búsqueda y los usuarios.
Ejemplo simple
Vue.js vue-router puede implementar fácilmente una aplicación de una sola página.
lt;router-linkgt; es un componente que se utiliza para establecer un enlace de navegación y cambiar entre diferentes contenidos HTML. El atributo to es la dirección de destino, que es el contenido que se mostrará.
En el siguiente ejemplo, agregamos vue-router, configuramos los componentes y el mapeo de rutas, y luego le indicamos a vue-router dónde renderizarlos. El código es el siguiente:
Código HTML
lt;script src="/vue/dist/vue.js"gt;lt;/scriptgt;lt;script src=" / vue-router/dist/vue-router.js"gt;lt;/scriptgt;
lt;div id="app"gt;
lt;h1gt;Hola aplicación ! lt;/h1gt;
lt;pgt;
lt;!-- Utilice el componente de enlace de enrutador para la navegación --gt;
lt. ;! -- Especifique el enlace pasando el atributo `to` --gt;
lt;!-- lt;router-linkgt; se representará en una etiqueta `lt;agt;`. por defecto --gt ;
lt;router-link to="/foo"gt;Ir a Foolt;/router-linkgt;
lt;router-link to=" /bar"gt; Ir a Barlt;/router-linkgt;
lt;/pgt;
lt;!-- Router-linkgt;
lt ;!- - Los componentes coincidentes con la ruta se representarán aquí--gt;
lt;router-viewgt;lt;/router-viewgt;lt;/divgt;Código JavaScript
// 0. Si usa programación de mecanismo modular e importa Vue y VueRouter, debe llamar a Vue.use(VueRouter)
// 1. Defina los componentes (enrutamiento).
//Se puede importar desde otros archivos
const Foo = { template: 'lt;divgt;foolt;/divgt; }
const Bar = { template: 'lt;divgt;barlt;/divgt;' }
// 2. Definir rutas
// Cada ruta debe asignar un componente.
Donde "componente" puede ser
// un constructor de componentes creado a través de Vue.extend(),
// o simplemente un objeto de configuración de componentes.
// Hablaremos del enrutamiento anidado más adelante.
const route = [
{ ruta: '/foo', componente: Foo },
{ ruta: '/bar', componente: Bar }
]
// 3. Cree una instancia de enrutador y luego pase la configuración de `rutas`
// También puede pasar otros parámetros de configuración, pero Primero: mantenlo simple.
const router = new VueRouter({
rutas // (abreviatura) equivalente a rutas: rutas
})
// 4. Cree y monte la instancia raíz.
// Recuerde inyectar enrutamiento a través de los parámetros de configuración del enrutador,
// para que toda la aplicación tenga funcionalidad de enrutamiento
const app = new Vue({
router
}).$mount('#app')
// ¡Ahora la aplicación se ha iniciado! Los enlaces de navegación en los que se haga clic tendrán el estilo class="router-link-exact-active router-link-active".