As a data scientist entering the world of frontend development, I find myself faced with the task of creating a UI at the request of my boss. Please bear with me as I attempt to explain my issue in layman's terms.
Currently, I am using Vue.js and have a parent component called home/settings which contains a menu leading to various sub-pages. The problem arises when clicking on the menu item for page1 under home/settings, it redirects to home/page1 instead.
If I manually input
home/settings/page1</code, the navigation to other sub-pages works fine. However, when starting from <code>home/settingssettings with page, resulting in a dead end.
The configuration in the router.js file is structured as follows:
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 },
},
],
},
],
})
The component within Settings can be visualized as:
<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>
Additional information can be provided upon request. Thank you!