Las aplicaciones de soportes de usuario de componentes con el enrutamiento funciones en la navegación (clic), por defecto mostrada etiqueta <a> con el enlace correcto pueden ser generados por otro atributo de etiqueta de la etiqueta.
Se genera esencialmente por un marcador unido a la evento de clic, y luego realiza la aplicación correspondiente empuje ejemplo VueRouter (), para el router-link ensamblaje, puede pasar los apoyos:
- para indicar la ruta de destino del enlace, cuando se hace clic, se inmediatamente dentro del valor para pasar a router.push (), por lo que este valor puede ser una cadena o una descripción de la posición de destino del objeto
- etiqueta del router de enlace de nombre de etiqueta prestación componente, un defecto
- booleano exacta "se activa", de acuerdo con el nombre de la clase por defecto se incluye partido
- append tipo booleano, el conjunto de atributos de datos anexados, agregue el grupo rey del camino antes de que el actual (relativa) Rey del camino
- reemplazar tipo booleano, después de reemplazar configuración, cuando se hace clic, se llame router.replace () en lugar router.push (), la historia no dejará este disco después de la navegación
- CSS nombre de clase que se utiliza cuando se activa enlace activeClass
- exactActiveClass configuración cuando el enlace se activa debe coincidir exactamente con la clase
- declaración de evento puede ser utilizado para eventos de navegación gatillo. Puede ser una cadena o una matriz de cadenas que comprende
Para el castaño:
escritor por: Desert QQ: 22969969
< Div ID = "aplicación" > < enrutador enlace a = "/ info / 1" >详情页1 </ enrutador-link > < enrutador enlace a = "/ info / 2" evento = "mouseover" >详情页2 </ enrutador-link > < enrutador-link a = "/ info / 3" tag = "p" >详情页3 </ enrutador-link > < hr /> < enrutador-view > </ enrutador-view > </ Div > < secuencia de comandos> Información const = {Plantilla: ' <div> id: {{$ route.params.id esta}} </ div>. ' } Rutas const = [ {ruta: ' / info /: id ' , componentes: información, nombre: ' información ' }, ] const aplicación = nueva Vue ({ EL: ' #app ' , enrutador: nueva VueRouter ({}) rutas }) </ escritura>
Después de la representación DOM de la siguiente manera:
Se puede ver el segundo componente routerlink dictada en etiqueta p, cuando hacemos clic en el efecto es el siguiente:
Se puede ver detalles en la página 3 no hizo clic, mover el ratón hacia arriba, automáticamente Conmutador de direccionamiento, y esto es porque se nos presenta al evento, en el caso anteriormente unidos a onmouseover.
enrutador-link montaje de una función de hacer que se define como sigue:
var Enlace = { nombre: 'RouterLink' , puntales: { // 可以传入的apoyos a: { Tipo: toTypes, requeridos: verdadera }, la etiqueta: { type: String, por defecto : 'a' }, exactas: Boolean, append: Boolean, reemplazar: Boolean, activeClass: cadena, exactActiveClass: String, eventos: { tipo: eventTypes, por defecto : 'clic' //默认为clic事件 } }, render: funciónrender (h) { // Router-Link montaje render función correspondiente a la función h en el createElement igual a $ grande VUE var el este $ 1 =. el este ; var Router = el este $ Router;. // Get $ Router casos var actual = el este $. ruta; // enrutamiento actual objeto var REF = router.resolve ( el este .para, actual, el este .Append); var UBICACIÓN = ref.location; // dirección para saltar, un objeto, por ejemplo: {_ normalizaron: true, ruta: "/ Login", Pregunta: {...}, el hash: ""} var= Ruta ref.route; // enrutamiento objeto var el href = ref.href; // El atributo href var clases = {}; // este código y de configuración sobre linkActiveClass, linkExactActiveClass la var globalActiveClass = router.options.linkActiveClass; var globalExactActiveClass = router.options.linkExactActiveClass; // Active Global Support clase vacía var activeClassFallback = globalActiveClass == nula 'Active-Router-Link'? : globalActiveClass; varexactActiveClassFallback = globalExactActiveClass == nula ? 'enrutador-link-exacta-activo' : globalExactActiveClass; var activeClass = esta == .activeClass nula ? activeClassFallback : este .activeClass; var exactActiveClass = esta == .exactActiveClass nula ? exactActiveClassFallback : este .exactActiveClass; var compareTarget = location.path ? createRoute ( nula , la ubicación, nula , router) : ruta; clases [exactActiveClass] = isSameRoute (actual, compareTarget); clases [activeClass] = la presente .exact ? clases [exactActiveClass] : isIncludedRoute (actual, compareTarget); var Handler = función (E) { // suceso de unión SI (guardEvent (e)) { // primero llama a la función de filtrar eventos no relacionados con la navegación y SI ( del este $ 1.replace) { // Si el conjunto de atributos reemplazar router.replace (UBICACIÓN); //La conmutación se realiza la navegación router.replace } else { router.push (UBICACIÓN); // de lo contrario el router.push actualización de navegación } } }; var ON = {el clic: guardEvent}; // <Router-Link> montaje están soportadas por defecto haga clic en evento, el siguiente se restablecerá SI (Array.isArray ( el presente .Los)) { el presente .event.forEach ( función (E) {ON [E] = Handler;}); } else { ON [ la presente .Los ] = Handler; } var= {Datos // En circunstancias normales, no es un reinicio on.click Handler clase: clases }; SI ( el presente .tag === 'a') { // Si una etiqueta es una etiqueta data.on = ON; data.attrs = {el href: href}; } else { // Si la otra etiqueta // Encuentra niño y aplicar la primera escucha <a> y el href var A = findAnchor ( el presente .. $ ranuras por defecto ); // Encuentra primera un <a> etiqueta IF (A) { // Si se encuentra una etiqueta de un // en un caso estático El <a> es el nodo a.isStatic = false ; var la aDatos = a.data = Extender ({}, a.data); aData.on = ON; var aAttrs = a.data.attrs = Extender ({}, a.data.attrs); aAttrs.href = del href; } else { // Si no se encuentra una etiqueta // no tienen haber <a> infantiles, escucha Aplicar auto a data.on = ON; // el propio monitor } } regreso H ( al este .tag, los datos, el presente . $ Ranuras. Predeterminado ) // última llamada $ createElement para crear el vnode } }
Si una etiqueta dentro de la función guardEvent ejecuta preventDefault () función le dice al navegador no llevar a cabo una acción asociada con el evento, todas las acciones, tales como la definición de la patata son alcanzados por VueRouter incorporados en el código.