因此，如果其他人在提出問題幾年后偶然發(fā)現(xiàn)這個(gè)問題，我會(huì)找到另一種方法來實(shí)現(xiàn)所需的行為：
在我的項(xiàng)目中，我喜歡通過傳遞給 vue-router-4 的 createRouter() 方法的配置數(shù)組在導(dǎo)航欄上顯示路由作為示例：
關(guān)鍵只是要了解 vue-router 內(nèi)部如何工作，以及它們?cè)?RouteRecordRaw 類上有一個(gè)名為“redirect”的屬性，它是一個(gè) RouteRecordRedirectOption-Type。在那里我們可以定義它應(yīng)該導(dǎo)航到的哈希：
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' }}
];
如果我們隨后將此數(shù)組傳遞給 createRouter 方法，我們可以通過其 getRoutes() 方法訪問導(dǎo)航欄 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 標(biāo)記中訪問該變量，如下所示：
<router-link v-for="route in routes" :key="route.name" :to="route" class="nav-element">{{ route.meta.name }}</router-link>
為了澄清上述情況，我很少使用 RouteRecordRaw 類的屬性名稱將其顯示在我的導(dǎo)航欄中，因?yàn)樗鼞?yīng)該是小寫的。這是路由的名稱，而不是我們應(yīng)該在前端顯示的內(nèi)容（除了在網(wǎng)址欄中）。因此另一種方法是將所有雜項(xiàng)信息放入元屬性中。
我希望上述解決方案能夠到達(dá)合適的人手中。
