Phenquestions
Vue.js es un marco de javascript reactivo, que se utiliza para crear 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 propósitos 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 para proporcionar esta función. 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 Vue Router en Vue.js.
Instalación
Podemos instalar el enrutador Vue en un Vue existente.js ejecutando el siguiente comando en la terminal
npm instalar vue-routerDespués de una instalación exitosa, necesitamos importar VueRouter en la.js en el directorio src y usando la siguiente sintaxis
importar Vue desde 'vue'importar enrutador desde './ enrutador '
Vue.usar (enrutador)
Después de importar el enrutador, está listo para usar vue-enrutador en su proyecto.
Pero si está instalando Vue.js usando Vue CLI. No necesitará este paso de instalación adicional. Puede agregar un complemento de enrutador vue durante la selección de un ajuste preestablecido.
Uso
El uso del enrutador vue 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 una navegación simple usando componentes de enlace de enrutador y proporcionamos el enlace usando el accesorio llamado 'to'. El enlace del enrutador 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 coincide con la ruta.
En el 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.js en el directorio del enrutador y definirlo como una ruta.
Para importar un componente, usamos la siguiente declaración
importar Comp desde "… / views / Comp.vue ";Después de importar, tenemos que definir la ruta ahora y mapearla al componente. Como esto,
rutas constantes = [camino: "/",
nombre: "Comp",
componente: Comp
];
También podemos dar varias rutas, separadas por una coma. Como esto,
rutas constantes = [camino: "/",
nombre: "Comp",
componente: Comp
,
ruta: "/ comp2",
nombre: "Comp2",
componente: Comp2
];
Después de definir las rutas. Pase la matriz de rutas a las instancias del enrutador. Entonces, creemos también la instancia del enrutador
const router = createRouter (rutas // abreviatura de 'rutas: rutas'
);
Al final, en la principal.archivo js. Tenemos que crear la instancia raíz y montarla también e inyectar las rutas en ella para que toda la aplicación sea consciente de las rutas.
createApp (Aplicación).usar (enrutador)
.mount ("# aplicación");
Usando esta técnica de inyección. Podemos acceder al router en cualquier componente, utilizando esto.$ enrutador.
Ahora podemos enviar rutas mediante programación con el clic de un botón o cualquier cosa que desee, en lugar de usar el componente de enlace de enrutador. Por ejemplo,
métodos:clickFunc ()
esto.$ enrutador.empujar ('/ sobre')
Cierre y resumen
En este artículo, hemos aprendido a instalar Vue Router de diferentes maneras y hemos aprendido a usar el enrutador Vue programáticamente en javascript y en Vue.plantilla de js. También hemos aprendido a configurar el enrutador Vue en un proyecto existente de una manera muy fácil y detallada paso a paso. Si desea obtener más información sobre Vue Router, visite Vue Router: Documentos oficiales.
