Прокрутите до привязки при refre sh или при изменении URL вручную - PullRequest
Новая
       4

Прокрутите до привязки при refre sh или при изменении URL вручную

0 голосов
/ 16 июня 2020

Я реализовал код из этого сообщения , позволяющий закреплять прокрутку при навигации с помощью маршрутизатора.

Но я заметил, что при refre sh или ручной навигации (манипулируя URL-адрес), страница не прокручивается до привязки, как ожидалось.

Я могу добавить этот код на все страницы, и он будет работать: 

mounted() {
    console.log('Location:', location.hash); //returns '#options'
    console.log('Route:', this.$route.hash); //returns '#options'

    if (location.hash)
        this.$nextTick().then(() => this.$scrollTo(location.hash, 700));
}

Есть ли любой глобальный способ установить этот код, без необходимости устанавливать код на каждой странице?

Я пытался установить это в файле App.vue, опора location.hash возвращает правильный ha sh, но this.$scrollTo() говорит, что не может найти ни одного объекта с таким идентификатором.

1 Ответ

0 голосов
/ 16 июня 2020

Я просто использовал vue-router навигатор: 

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes,

    scrollBehavior (to, from, savedPosition) {
        if (to.hash) {
            this.app.$scrollTo(to.hash, 700);
            return { selector: to.hash }
        } else if (savedPosition) {
            return savedPosition;
        } else {
            //When the route changes, the page should scroll back to the top.
            this.app.$scrollTo('#app', 700);
            return { x: 0, y: 0 }
        }
    }
});

router.afterEach((to, from) => {
    if (to.hash && to.path != from.path)
        Vue.nextTick().then(() => VueScrollTo.scrollTo(to.hash, 700));
});

Не связано с вопросом, но связано с навигацией с хешами:

Если вы публикуете свой сайт в GitHub Pages, вам нужно будет добавить следующие две части.

Добавьте страницу 404. html stati c, чтобы перенаправить навигацию обратно на страницу root, но передав несколько параметров в sessionStorage: 

<script>
    const segment = 1;  
    //Gets the relative path and the hash of the URL.  
    sessionStorage.redirect = '/' + location.pathname.slice(1).split('/').slice(segment).join('/');  
    sessionStorage.hash = location.hash;  

    //Forces the navigation back to the main page, since it's the only entry point that works.
    location.replace(location.pathname.split('/').slice(0, 1 + segment).join('/'));
</script>

Измените свою main.js страницу, чтобы ожидать параметры перенаправления: 

new Vue({
    router,
    i18n,
    render: (h) => h(App),
    created() {
        //If a redirect exists, tell the router.
        if (sessionStorage.redirect) {
            const redirect = sessionStorage.redirect;
            const hash = sessionStorage.hash;
            delete sessionStorage.redirect;
            delete sessionStorage.hash;

            this.$router.push(redirect + hash);
        }
    }
}).$mount("#app");
...