Vue路由器-路径#ID滚动行为

nlejzf6q  于 2022-12-14  发布在  Vue.js
关注(0)|答案(2)|浏览(188)

我已经创建了一个菜单,我通过<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;

如何在页面的不同部分之间单击浏览?

jobtbby3

jobtbby31#

您必须将您的VueRouter从hash模式切换到history路由模式-然后hashtags将以不同的方式工作。
路由的路径中不应包含哈希符号#,而应在路由链接的hash属性下提供该符号:

<router-link :to="{ name: pathName, hash: '#text' }">
    Jump to content
</router-link>

但是仅仅这样还不够,还需要修改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 };
    }
});
xdyibdwo

xdyibdwo2#

通过一些研究,我发现了两件可以帮助你的事情。
首先,此错误已在github vue-router issues page上进行了讨论。
第二,我找到了那个Workaround on npmjs.com,你大概可以给予一试。
编辑
我找到了类似问题here的另一个解决方案。
that page中,我找到了一个scrollBehavior示例,如下所示:

scrollBehavior: function (to) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

如果它仍然不起作用,您可以尝试使用:to="{ name: 'Home', hash: 'fifthPage'}"

相关问题