Una desventaja del desarrollo de proyectos de rutas múltiples
Cuando varias personas desarrollan un proyecto Vue , diferentes personas pueden desarrollar diferentes rutas. Por ejemplo, Xiao Ming define una ruta llamada xiaoming ,
Zhang San define una ruta llamada zhangsan
// src\router\index.ts
// 小明的模块
{
path: "/xiaoming",
name: "xiaoming",
component: xiaoming,
},
// 张三的模块
{
path: "/zhangsan",
name: "zhangsan",
component: zhangsan,
},
Suponiendo que la baseUrl del proyecto está configurada para probar , Xiaoming debe ingresar http://localhost:8080/ t est/xiaoming en el navegador cada vez que desarrolla,
Zhang San debe ingresar a http://localhost:8080/ t est/zhangsan cada vez que se desarrolla, lo cual es muy problemático. Podemos experimentarlo intuitivamente a través de la siguiente figura:
De la imagen de arriba, podemos encontrar que el desarrollo de proyectos múltiples de vue es muy problemático
- Primero debemos encontrar el enlace de actualización en caliente desde la consola y copiarlo en el navegador
- Luego hojee la estructura del proyecto capa por capa para encontrar el nombre de la ruta
- Pegue el nombre de la ruta copiada detrás del enlace
Estamos viendo otros escenarios de dolor de huevo que encontró Xiao Ming:
El proyecto de Xiaoming necesita algunos parámetros de consulta para acceder, Xiaoming tiene que ingresar estos largos enlaces cada vez que visita el proyecto:
http://localhost:8080/prueba/xiaoming?loginName=xiaoming&code=test&type=2
Xiao Ming está desesperado. . . . . . . . . .
Script auxiliar de desarrollo de proyectos de enrutamiento múltiple de Vue
El problema de Xiao Ming también me preocupa desde hace mucho tiempo, así que desarrollé un script de mono de grasa específicamente para resolver este problema.
Veamos primero la función del script:
Cuando iniciamos el script, solo necesitamos copiar el enlace de actualización en caliente de la consola al navegador, y el script ayudará automáticamente a Xiao Ming a agregar la ruta después de la ruta , y Xiao Ming ya no necesita mirar a través de la estructura del proyecto para encontrar el nombre de la ruta!
¡Lo que es más conveniente es que en el proyecto, Xiao Ming también puede usar la ventana flotante del script para cambiar rápidamente entre Zhang San y sus propios módulos!
Incluso, cuando Xiao Ming ingresa muchos parámetros de consulta, la secuencia de comandos puede grabar automáticamente. Cuando la ruta de entrada de Xiao Ming está incompleta, la secuencia de comandos ayudará automáticamente a Xiao Ming a completarla.
Xiao Ming está muy feliz, ¡muy conveniente! Xiao Ming siente curiosidad por saber cómo funciona el guión.
principio de guión
El script es fácil de entender, es una pieza de js, que se inyecta en la página web actual para que funcione a través del complemento del navegador (oil monkey).
Entonces, ¿cómo obtiene el script la información de enrutamiento?
De hecho, para proyectos desarrollados por vue, el elemento raíz de cada dom almacena esta información. Tomemos como ejemplo el sitio web oficial de los Nuggets (desarrollado por Vue):
A través del ejemplo, podemos saber que el elemento raíz de Vue (id es __nuxt) del sitio web oficial de Nuggets contiene información de Vue en su valor de atributo.
Podemos obtener la información de enrutamiento del sitio web oficial de los Nuggets a través del siguiente método.
const vueApp = document.body.querySelector("#__nuxt")
let $router = vueApp?.__vue__?.$router?.options?.routes || []
Este es también el principio de que los scripts pueden ejecutarse sin problemas en páginas web desarrolladas por vue
Cómo se descarga el script
instalar tampermonkey
Tampermonkey es una aplicación de navegador que se puede utilizar para ejecutar scripts personalizados.
Por lo tanto, para usar este script, primero debe instalar tampermonkey (complemento de mono de aceite) para su navegador .
- Es muy sencillo instalar el complemento oil monkey en la tienda de aplicaciones del navegador egde.
- Para descargar el complemento Oil Monkey en Google Chrome, debe usar una escalera. También puedes dejar un mensaje en el área de comentarios, y te enviaré el plugin y el tutorial de instalación por mensaje privado .
Busque el script vue-router
Después de instalar el complemento Greasyfork del navegador, puede buscar el script a través de https://greasyfork.org/zh-CN
Ingrese la palabra clave vue-router
Haga clic en el script buscado para instalarlo.
Configuración de secuencias de comandos y manejo de excepciones
El panel de secuencias de comandos se configura de la siguiente manera:
El panel de configuración es el siguiente:
parámetro de búsqueda de ruta
Después de completar el parámetro de búsqueda de ruta, este parámetro se agregará para todas las rutas al saltar.
Cuando su proyecto necesite establecer loginName=xxx, simplemente complete este parámetro sin el signo ?.
Este valor también se registra automáticamente como resultado de la entrada del usuario.
Solo se muestra en el modo de desarrollo
De forma predeterminada, este script solo funciona con el nombre de dominio de localhost. Si desea que se ejecute en otros proyectos desarrollados por vue, simplemente cierre este botón.
Por ejemplo, después de desactivar esta opción, puede usar este complemento en el sitio web oficial de Nuggets , la biblioteca de componentes Meili Snow Mountain, etc.
Esta página de función se puede realizar a través del botón de secuencia de comandos.
Finalización inteligente de enrutamiento
Si no desea que el complemento complete automáticamente las rutas por usted, simplemente desactive esta función.
Haga clic en el botón Actualizar
Trabajo adicional para el botón de actualización que viene con el script de configuración. Si no se marca nada, el botón Actualizar solo volverá a cargar la página actual.
restablecer secuencia de comandos
Cuando la página se actualiza repetidamente debido a una excepción en la secuencia de comandos, puede borrar todos los datos almacenados en caché de la secuencia de comandos a través del botón de reinicio.
