Vue.enrutador js

Vue.JS es un marco reactivo de JavaScript, que se utiliza para construir UI (interfaces de usuario) y SPA (aplicaciones de una sola página) y a los desarrolladores les encanta codificar y sentir libertad y comodidad mientras desarrollan aplicaciones en Vue.js. Para fines de enrutamiento, vue.JS no proporciona la función de enrutamiento incorporada. Pero hay una biblioteca oficial de terceros con el nombre de Vue Router por proporcionar esta característica. Al usar esta función podemos navegar entre las páginas web pero sin recargar. Entonces, en este artículo, veremos cómo podemos instalar y usar el enrutador Vue en Vue.js.

Instalación

Podemos instalar el enrutador Vue en un Vue existente.proyecto JS ejecutando el siguiente comando en la terminal

NPM Instalar Vue-Router

Después de una instalación exitosa, necesitamos importar Vueruter en la principal.Archivo JS en el directorio SRC también utilizando la siguiente sintaxis

importar vue de 'vue'
Importar enrutador de './enrutador '
Vue.Usar (enrutador)

Después de importar el enrutador, está listo para usar Vue-Router en su proyecto.

Pero si está instalando Vue.js usando vue cli. No necesitará este paso de instalación adicional. Puede agregar un complemento Vue-Router durante la selección de un preajuste.

Uso

El uso del vue-router es muy simple y fácil de usar. Primero, en la plantilla o html

En este ejemplo bastante simple y claro de Vue-Router. Hemos creado navegación simple usando componentes de enlace de enrutador y proporcionamos el enlace utilizando el accesorio llamado 'a'. El enrutador-enlace funciona igual que una etiqueta de anclaje 'a'. En realidad se representa como una etiqueta 'a' de forma predeterminada. En la vista del enrutador, tendremos el componente relativo que coincida con la ruta.

En JavaScript, primero tenemos que registrar e importar los componentes para definir sus rutas. Suponemos que tenemos un componente llamado Comp.Vue en el directorio de vistas al que importaremos en el índice del enrutador.archivo js en el directorio de enrutador y definirlo como una ruta.

Para importar un componente, utilizamos la siguiente declaración

Importar comp de "... /vistas /comp.vue ";

Después de importar, tenemos que definir la ruta ahora y asignarla al componente. Como esto,

rutas const = [

camino: "/",
Nombre: "Comp",
Componente: Comp

];

También podemos dar múltiples rutas, separadas por una coma. Como esto,

rutas const = [

camino: "/",
Nombre: "Comp",
Componente: Comp
,

Ruta: "/Comp2",
Nombre: "Comp2",
Componente: Comp2

];

Después de definir las rutas. Pase Rutas Array a las instancias del enrutador. Entonces, creemos la instancia del enrutador también

const router = createrouter (
rutas // abreviatura de 'rutas: rutas'
);

Al final, en general.archivo js. Tenemos que crear la instancia raíz y el montaje también e inyectar las rutas en ella para que toda la aplicación se dé cuenta de las rutas.

createApp (aplicación)
.Usar (enrutador)
.montura ("#app");

Mediante el uso de esta técnica de inyección. Podemos acceder al enrutador en cualquier componente, utilizando este.$ enrutador.

Ahora podemos presionar programáticamente las rutas con el clic de un botón o cualquier cosa que desee, en lugar de usar el componente de enrutador-enlace. Por ejemplo,

métodos:
clickFunc ()
este.$ enrutador.Push ('/sobre')

Envolviendo y resumen

En este artículo, hemos aprendido a instalar el enrutador Vue usando diferentes formas y aprendimos a usar el enrutador Vue programáticamente en JavaScript y en el Vue.Plantilla de JS. También hemos aprendido a configurar el enrutador Vue en un proyecto existente en una guía detallada muy fácil y paso a paso. Si desea obtener más información sobre el enrutador Vue, visite el enrutador Vue: documentos oficiales.