滚动以锚定刷新或手动更改URL [英] Scroll to anchor on refresh or on manual URL change
问题描述
我实现了这篇文章中的代码,使滚动条可以在使用路由器导航时锚定.
I implemented the code from this post, enabling the scroll to anchor while navigating using the router.
但是我注意到在刷新或手动导航(通过操纵URL)时,页面无法按预期滚动到锚定位置.
But I noticed that on a refresh or manual navigation (by manipulating the URL), the page does not scroll to anchor as expected.
我可以将此代码添加到所有页面,并且可以正常工作:
I can add this code to all pages, and it is going to work:
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
属性返回正确的哈希值,但是this.$scrollTo()
说它找不到具有该ID的任何对象.
I've tried to set that on the App.vue
file, the location.hash
prop returns the correct hash, but this.$scrollTo()
says that it can't find any object with that ID.
推荐答案
我只是使用了vue-router
导航卫士:
I simply used a vue-router
navigation guard:
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
中发布网站,则需要添加以下两个部分.
Unrelated to the question, but related to the navigation with hashes:
If you are publishing your website in GitHub Pages
, you'll need to add these next two parts.
添加一个404.html静态页面,以将导航重定向回到根页面,但在sessionStorage
中传递一些参数:
Add a 404.html static page, to redirect the navigation back to the root page, but passing a few parameters in the 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
页面以期望重定向参数:
Alter your main.js
page to expect the redirect parameters:
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");
这篇关于滚动以锚定刷新或手动更改URL的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!