Vue 路由器无法从嵌套视图嵌套子级访问根应用程序路径“/”

Question

我正在尝试从具有嵌套子项的嵌套视图访问应用程序“/”或命名组件“Home”的根路径。

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    ...
    {
        path: "/account",
        name: "Account",
        component: AccountHome,
        children: [
            {
                name: "AccountAvatars",
                path: "avatars",
                component: AccountAvatar,
            },
         ...
        ],
    },
];

const router = new VueRouter({
    mode: "history",
    base: '/',
    routes,
    scrollBehavior(to, from, savedPosition) {
        return { x: 0, y: 0 };
    },
});

Vue.use(VueRouter);

export default router;
    ....

当我想使用 router-link 或手动使用 /account/avatars 中的 this.$router.push({name: 'Home'}) 或 this.$router.push({name: '/'}) 时，例如单击 router-link 或 $router.push 根本不起作用。

App.vue

<template>
    <div id="app">
        <global-header />
        <router-view />
        <global-footer />
    </div>
</template>

首页.vue

<template>
    <div class="home">    
        <offer />
        <home-menu />
        <game-catalog/>
        <benefits />
        <news />
    </div>
</template>

AccountHome.vue

<template>
    <div class="container">
        <div
            class="account"
        >
            <account-left-sidebar />
            <router-view />
            <account-right-sidebar />
        </div>
    </div>
</template>

路由器实例

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

Answer 1

检查 BASE_URL 里面的内容。 VueRouter 构造函数的 .base 参数不是您应用的 baseUrl。这只是默认路径。 official Vue Router doc。应该是base:'/'。

检查此工作代码：

https://codesandbox.io/s/holy-bush-jsi79?file=/src/routes.js

编辑：我也添加了编程路由示例。（以匹配您的编辑）

编辑 2：我还添加了另一个与您的编辑完全相同的运行示例。它仍然有效。我认为您的组件之一正在摆弄路由器。

https://codepen.io/rabelais88/pen/NWjJEMe