[英]Vue router - path #ID scrollBehavior
I have created a MENU where I link via <router-link>
but certain links are linked to the same page using (anchors).我创建了一个 MENU,我在其中通过
<router-link>
链接,但某些链接使用(锚点)链接到同一页面。
When I'm on the Work page and I click on the #services
section, which is on the Bio page, the section is displayed correctly, but if I want to go to the services
section on the Bio page, the URL just changes, but it won't go to the right section for me.当我在“工作”页面上并单击生物页面上的
#services
部分时,该部分显示正确,但如果我想将 go 转到生物页面上的services
部分,则 URL 会发生变化,但它不会 go 到我的正确部分。
noubtest.com noubtest.com
NAVIGATION导航
<router-link v-show="!mobile" class="link bio" :to="{ name: 'Home' }">Bio</router-link>
<router-link v-show="!mobile" class="link link2" :to="{ name: 'Services' }">Services</router-link>
<router-link v-show="!mobile" class="link link2" :to="{ name: 'SelectedWork' }">Work</router-link>
ROUTER路由器
{
path: "/home",
name: "Home",
component: Home,
meta: {
title: "Bio",
requiresAuth: false,
},
},
{
path: "/home#fifthPage",
name: "Services",
component: Home,
meta: {
title: "Services",
requiresAuth: false,
},
},
const router = new VueRouter({
mode: "history",
routes,
scrollBehavior() {
return { x: 0, y: 0 };
},
});
router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | YounesFilm`;
next();
});
router.beforeEach(async (to, from, next) => {
let user = firebase.auth().currentUser;
let admin = null;
if (user) {
let token = await user.getIdTokenResult();
admin = token.claims.admin;
}
if (to.matched.some((res) => res.meta.requiresAuth)) {
if (user) {
if (to.matched.some((res) => res.meta.requiresAdmin)) {
if (admin) {
return next();
}
return next({ name: "Home" });
}
return next();
}
return next({ name: "Home" });
}
return next();
});
export default router;
How can I click through the page between sections?如何在各部分之间点击页面?
With a few research, I found two things that could help you.通过一些研究,我发现了两件事可以帮助你。
First, this error is known and discussed on github vue-router issues page .首先,这个错误是已知的,并在github vue-router 问题页面上进行了讨论。
Second, I found that Workaround on npmjs.com , and you could probably give it a try.其次,我在 npmjs.com 上找到了 Workaround ,您可以尝试一下。
EDIT编辑
I found another solution to a similar problem here .我在这里找到了类似问题的另一种解决方案。
And from that page , I found a scrollBehavior example like this:从那个页面,我找到了一个像这样的 scrollBehavior 示例:
scrollBehavior: function (to) {
if (to.hash) {
return {
selector: to.hash
}
}
}
And if it still doesn't work, you could try to use :to="{ name: 'Home', hash: 'fifthPage'}"
.如果仍然不起作用,您可以尝试使用
:to="{ name: 'Home', hash: 'fifthPage'}"
。
You must switch your VueRouter from hash
mode to history
mode of routing - then hashtags will work but in a different way.你必须将你的 VueRouter 从
hash
模式切换到history
路由模式 - 然后主题标签将以不同的方式工作。
Your routes should not have a hash symbol #
inside their path - instead, you should provide it under the hash
attribute of the route link:您的路线不应在其路径中包含 hash 符号
#
- 相反,您应该在路线链接的hash
属性下提供它:
<router-link :to="{ name: pathName, hash: '#text' }">
Jump to content
</router-link>
But this alone is not enough.但这还不够。 You also need to alter the
scrollBehavior
of the VueRouter:您还需要更改
scrollBehavior
的滚动行为:
import { routes } from './routes.js';
const router = new VueRouter({
routes,
scrollBehavior(to, from, savedPosition)
{
if (savedPosition)
{
return savedPosition;
}
if (to.hash)
{
return { selector: to.hash }; // <==== the important part
}
return { x: 0, y: 0 };
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.