无法从父路径中的按钮转到子路径

Question

我是一名数据科学家，对前端完全陌生，但我的老板希望我构建一个 UI，所以我们就到这里了。我会尽力解释我的问题，请原谅我不专业的措辞。

我正在使用 Vue.js。我有一个父home/settings，那里有一个子页面菜单。当我单击菜单时，我想转到home/settings/page1，但它却转到home/page1。

我可以手动输入home/settings/page1，然后从那里页面导航到其他子页面很好，但如果我在home/settings，它将settings替换为page，当然那里什么都没有.

router.js 看起来像这样：

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      components: { base: Home },
    },
    {
      path: '/Settings',
      components: { base: Settings },
      children: [
        {
          path: '/',
          components: { settingsMain: SettingsPage1 },
        },
        {
          path: 'page1',
          components: { settingsMain: SettingsPage1 },
        },
        {
          path: 'page2',
          components: { settingsMain: SettingsPage2 },
        },
      ],
    },
  ],
})

Settings 中的组件如下所示：

<template>
  <fd-menu @select="goToPage">
    <fd-menu-list>
      <fd-menu-item value="1">
        Setting 1
      </fd-menu-item>
      <fd-menu-item value="2">
        Setting 2
      </fd-menu-item>
    </fd-menu-list>
  </fd-menu>
</template>

<script>
export default {
  methods: {
    goToPage(item)
    {
      this.$router.push('page' + item.value)
    }
  }
};
</script>

如果需要更多信息，请告诉我。

Answer 1

router.push 需要完整的导航路径来匹配<router-link> 等路线。尝试设置完整的子路径。

this.$router.push('/settings/page' + item.value)