Vue 路由器 - 路徑#ID scrollBehavior

Question

我創建了一個 MENU，我在其中通過<router-link>鏈接，但某些鏈接使用（錨點）鏈接到同一頁面。
當我在“工作”頁面上並單擊生物頁面上的#services部分時，該部分顯示正確，但如果我想將 go 轉到生物頁面上的services部分，則 URL 會發生變化，但它不會 go 到我的正確部分。

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;

如何在各部分之間點擊頁面？

Answer 1

通過一些研究，我發現了兩件事可以幫助你。

首先，這個錯誤是已知的，並在github vue-router 問題頁面上進行了討論。

其次，我在 npmjs.com 上找到了 Workaround ，您可以嘗試一下。

編輯

我在這里找到了類似問題的另一種解決方案。

從那個頁面，我找到了一個像這樣的 scrollBehavior 示例：

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

如果仍然不起作用，您可以嘗試使用:to="{ name: 'Home', hash: 'fifthPage'}" 。

Answer 2

你必須將你的 VueRouter 從hash模式切換到history路由模式 - 然后主題標簽將以不同的方式工作。
您的路線不應在其路徑中包含 hash 符號# - 相反，您應該在路線鏈接的hash屬性下提供它：

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

但這還不夠。 您還需要更改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 };
    }
});