使用 Vue Router 滚动到锚点

Question

我需要在 vuejs 中设置一个锚链接才能转到：<h1 id="apply">Test anchor</h1>以下内容有效，但它将 url 更改为 http://localhost:8080/#/apply<a href="#apply" class="btn btn-primary mt-3">Apply Now</a>如果我刷新页面，它不知道该去哪里。以下内容也不适合我。它甚至不会下降到#apply。<router-link to="/careers/job-1#apply">test</router-link>如何使用 vuejs 路由设置锚链接？

Answer 1

将 apath和 ahash属性添加到您的to对象中：

<router-link :to="{ path: '/careers/job-1', hash: '#apply' }">test</router-link>

并添加scrollBehavior到您的路由器定义中：

const router = new VueRouter({

  ...

  scrollBehavior (to, from, savedPosition) {

    if (to.hash) {

      return {

        selector: to.hash,

        behavior: 'smooth'

      };

    }

    return { x: 0, y: 0 };  // Go to the top of the page if no hash

  },

  ...

})

现在它应该滚动（平滑，除非您删除该behavior属性）到由哈希定义的锚点

Answer 2

因此，如果其他人在提出问题几年后偶然发现这个问题，我会找到另一种方法来实现所需的行为：

在我的项目中，我喜欢通过传递给 vue-router-4 的 createRouter() 方法的配置数组在导航栏上显示路由作为示例：

关键只是要了解 vue-router 内部如何工作，以及它们在 RouteRecordRaw 类上有一个名为“redirect”的属性，它是一个 RouteRecordRedirectOption-Type。在那里我们可以定义它应该导航到的哈希：

const routes: Array<RouteRecordRaw> = [

    { name: 'home', path: '/', meta: { name: 'Home' }, component: () => import("@/pages/HomePage.vue") },

    { name: 'members', path: '/', meta: { name: 'Members'} , redirect: { name: 'home', hash: '#members' }},

    { name: 'events', path: '/', meta: { name: 'Events'} , redirect: { name: 'home', hash: '#events' }}

];

如果我们随后将此数组传递给 createRouter 方法，我们可以通过其 getRoutes() 方法访问导航栏 vue 文件中的路由列表：

// router.ts

const router = createRouter({

    history: createWebHistory(),

    routes: routes,

    scrollBehavior(to) {

        if (to.hash) return { el: to.hash, behavior: 'smooth' };

        return { top: 0, behavior: 'smooth' };

    }

});

// TheNavbar.vue

const routes = router.getRoutes();

然后可以在 router-link 标记中访问该变量，如下所示：

<router-link v-for="route in routes" :key="route.name" :to="route" class="nav-element">{{ route.meta.name }}</router-link>

为了澄清上述情况，我很少使用 RouteRecordRaw 类的属性名称将其显示在我的导航栏中，因为它应该是小写的。这是路由的名称，而不是我们应该在前端显示的内容（除了在网址栏中）。因此另一种方法是将所有杂项信息放入元属性中。

我希望上述解决方案能够到达合适的人手中。