TA貢獻1810條經驗 獲得超4個贊
將 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屬性）到由哈希定義的錨點
TA貢獻1796條經驗 獲得超4個贊
因此，如果其他人在提出問題幾年后偶然發現這個問題，我會找到另一種方法來實現所需的行為：
在我的項目中，我喜歡通過傳遞給 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 類的屬性名稱將其顯示在我的導航欄中，因為它應該是小寫的。這是路由的名稱，而不是我們應該在前端顯示的內容（除了在網址欄中）。因此另一種方法是將所有雜項信息放入元屬性中。
我希望上述解決方案能夠到達合適的人手中。
舉報