Estoy creando un pequeño Vue webapp, quiero crear una etiqueta de anclaje en el presente.

Me han dado un id a uno de los div quería tener las etiquetas de anclaje como este:

<div id="for-home">
   ....
</div>

Y aquí está mi configuración del router:

export default new Router({
  abstract: true,
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    { path: '/', component: abcView}
  ]
})

Pero con esto que las etiquetas de anclaje están trabajando a veces y a veces no funciona, he perdido algo de esto?

InformationsquelleAutor Saurabh | 2016-10-31

3 Comentarios

  1. 36

    Creo que usted está preguntando acerca de saltar directamente a un área determinada de la página, accediendo a una etiqueta de anclaje como #section-3 dentro de la página.

    Para que esto funcione, usted debe modificar su scrollBehavior función de la siguiente manera:

    new VueRouter({
        mode: 'history',
        scrollBehavior: function(to, from, savedPosition) {
            if (to.hash) {
                return {selector: to.hash}
            } else {
                return { x: 0, y: 0 }
            }
        },
        routes: [
            {path: '/', component: abcView},
            //your routes
        ]
    });

    Ref: https://router.vuejs.org/guide/advanced/scroll-behavior.html#async-scrolling

    Hice el intento de creación de un jsFiddle ejemplo, pero no es trabajo porque de mode:'history'. Si usted copie el código y ejecutar localmente, usted podrá ver cómo funciona: https://jsfiddle.net/mani04/gucLhzaL/

    Volviendo {selector: to.hash} en scrollBehavior, usted pasará a la etiqueta de anclaje hash a la siguiente ruta, que se vaya a la sección correspondiente (marcado con id) en esa ruta.

    • ¿Esto solo funciona en el modo historia? Yo no puedo conseguir que funcione, pero no estoy en el modo historia
    • Sí, el desplazamiento en el comportamiento de los de la página menciona claramente esto. La razón es porque ya tienes el hash identificador atado a un router estado. Tener un segundo hash para identificar la posición de la página (desplazamiento de anclaje) no es posible. Otra opción es pasar un query parámetro en la ruta y, a continuación, utilizar javascript antiguos para desplazarse hasta el lugar correcto dentro de la página de destino. No tengo un ejemplo de trabajo para mostrar, pero creo que se puede hacer si pasamos algún tiempo en él.
    • Oh, sí lo hace claramente lo menciona. Te juro que me tiene un punto ciego para la negrita notas. Gracias
  2. 2

    Acabo de llegar a través de este problema y he pensado que hay un poco de espacio para optimizar la página de intercambio. En mi caso me gustaría hacer una transición suave en lugar de «saltar la cerca». Ya he requerido en jQuery como alias de $.

    Aquí está mi Configuración de tu Router para la animación suave, siéntase libre de modificar las líneas a sus necesidades en consecuencia. Este código podría ha hecho más limpia, pero debe ser lo suficientemente fina como para mostrar que la idea de trabajo.

    //Register Router and Paths
    const router = new VueRouter({
        mode: 'history',
        routes : [
            { path: '/aboutme/', component: index, name:'me.index'},
            { path: '/aboutme/cv', component: cv, name:'me.cv' }
        ],
    
        //Build smooth transition logic with $
        scrollBehavior (to, from, savedPosition) {
           if (to.hash) {
              return $('html,body').stop().animate({scrollTop: $(to.hash).offset().top }, 1000);
           } else {
              return $('html,body').stop().animate({scrollTop: 0 }, 500);
           }
        }
    })

    Lado la Pregunta de mi lado: ¿tenemos que devolver nada? No tengo ningún problema con o sin devolver debido a la Animación jQuery, es el manejo de la página de desplazamiento.

    que respecta a Gkiokan

  3. 2

    Si usted necesita para hacer de animación desplázate yo uso el paquete de vue-desplázate: es muy fácil para la instalación.

    Ejemplos con docs y el código se puede encontrar aquí: https://github.com/rigor789/vue-scrollto/

    • ¿La instalación mediante Nuxtjs? si es así, ¿cómo se hace ? yo intente conseguir el error inesperado palabra clave var.
    • No, no estoy usando Nuxtjs. En claro SSR es muy fácil yo instalación: app.js importación VueScrollTo de ‘vue-desplázate’; Vue.uso(VueScrollTo, { duración: 800, facilitando: ‘ease-in-out», offset: -60, }); <a href=»#» v-desplazamiento-a=»‘#elemento'»>Desplazar a #elemento</a> <div id=»elemento»> Hola. Soy #elemento. </div>

Dejar respuesta

Please enter your comment!
Please enter your name here