En Vue, la etiqueta router-link se usa para saltar a la página. De hecho, se transforma en una etiqueta a tradicional durante el proceso de compilación. El punto de to es el enlace href, pero en la etiqueta a tradicional, se pasan parámetros Es casi muy problemático Cosas, pero vue lo hace fácilmente.
Vue2 y Vue3 pasan parámetros de la misma manera, que se presentarán a continuación.
¿El primero es usarlo directamente? Costuras como to=".index"?age=18&sex="male" La barra de direcciones del navegador mostrará directamente esta URL.
El segundo es usar la consulta para pasar parámetros, como to={path:"/index",query:{name:"cat",age:18}}, la consulta se mostrará directamente en la barra de direcciones como se muestra arriba. Eso es /index?name="cat"&age=18,
El tercero es el paso de parámetros params, como to={name:"index",params:{name:"dog",num:10}}, pero este método de paso de parámetros no se mostrará en la barra de direcciones del navegador, y Un punto es que solo se puede usar el atributo de nombre para pasar parámetros en params. Si se usa la ruta, los parámetros se ignorarán.
También existe la navegación de enrutamiento programática, que utiliza el método push y el método de reemplazo en el enrutador en vue.
Utilice this.$router.push({name:"index",params:{age:18,name:"cat"}}) o empalme directo en vue2 y 3
his.$router.push(`/index/${age}/${name}`), el método de reemplazo es similar al push, así que no entraré en detalles aquí
Pero, ¿cómo obtenemos los parámetros pasados?
Use $route.query.name en vue2 Si usa query para pasar parámetros, si usa params, es $route.params.name,
En vue3, primero introduzca useRoute useRouter y luego use una variable para inicializarlo, como ruta = useRoute ()
router=useRouter(), hay métodos de inserción y reemplazo en el enrutador , y necesitamos usar route si queremos aceptar los parámetros pasados . Si usa query para pasar parámetros, route.query contiene los parámetros que pasó. Si use parámetros para pasar, simplemente reemplace la consulta con parámetros.
Cuando saltamos exitosamente a una página, usted pasó una identificación de parámetro clave, pero cuando actualiza la página, descubre que falta el parámetro. En este momento, debe configurar la ruta en index.js/ts en la carpeta de ruta. , como index/:id Si actualiza nuevamente, no se perderá. Esta situación solo se aplica al paso de parámetros de parámetros, y el paso de parámetros de consulta no provocará la pérdida de los parámetros de la página de actualización.