I've been facing challenges with writing Vue code. Currently, I am utilizing both Vue and Vuetify frameworks.
There are A and B pages in the application. It works fine when navigating to either the A or B page individually.
However, an issue arises when the sequence of navigation is as follows: A -> B -> A.
menuselector.vue
<template>
<v-list>
<template v-for='(eachmenu) in menu'>
<v-list-item
:to='eachmenu.path'
>
<v-list-item-title>
{{eachmenu.title}}
</v-list-item-title>
</v-list-item>
</template>
</v-list>
</template>
<script>
export default {
name: 'selector',
data() {
return {
menu: [
{
title: 'A',
path: '/A',
},
{
title: 'B',
path: '/B',
}
]
}
}
}
</script>
router.vue
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
redirect: '/A',
component: TestComponent,
children: [
{
path: 'A',
component: () => import('@/component/A.vue'),
name: 'Acomponent',
},
{
path: 'B',
component: () => import('@/component/B.vue'),
name: 'Bcomponent',
}
]
}
]
})
A.vue&B.vue
<template>
test
</template>
<script>
export default {
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
}
}
</script>
The console output displays the following:
https://i.sstatic.net/KB7QU.png
What could be causing this issue?