我已经创建了一个菜单,我通过<router-link>
链接,但某些链接链接到同一个页面使用(锚)。
当我在“工作”页面上单击“个人简介”页面上的#services
部分时,该部分会正确显示,但如果我想转到“个人简介”页面上的services
部分,URL会发生变化,但不会转到正确的部分。
noubtest.com
导航
<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>
路由器
{
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;
如何在页面的不同部分之间单击浏览?
2条答案
按热度按时间jobtbby31#
您必须将您的VueRouter从
hash
模式切换到history
路由模式-然后hashtags将以不同的方式工作。路由的路径中不应包含哈希符号
#
,而应在路由链接的hash
属性下提供该符号:但是仅仅这样还不够,还需要修改VueRouter的
scrollBehavior
:xdyibdwo2#
通过一些研究,我发现了两件可以帮助你的事情。
首先,此错误已在github vue-router issues page上进行了讨论。
第二,我找到了那个Workaround on npmjs.com,你大概可以给予一试。
编辑
我找到了类似问题here的另一个解决方案。
在that page中,我找到了一个scrollBehavior示例,如下所示:
如果它仍然不起作用,您可以尝试使用
:to="{ name: 'Home', hash: 'fifthPage'}"
。