How do I access subroutes?

[feijihe]

pages/
├── about/ # 静态资源（图片、字体等）
├────index.vue
├────test/
├──────index.vue
App.vue

App.vue

<script setup lang="ts">
import { onMounted } from 'vue';
import { RouterView } from 'vue-router';

onMounted(() => {
  console.log('App mounted')
})
</script>

<template>
  <!-- <HelloWorld msg="Vite + Vue" /> -->
  <RouterView />
</template>

/pages/about/index.vue

<script lang="ts" setup>
import { onMounted } from 'vue';
import { RouterView } from 'vue-router';

onMounted(() => {
    console.log('about mounted')
})
</script>

<template>
    <div>this is about</div>
    <RouterView />
</template>

/pages/about/test/index.vue

<script lang="ts" setup>
import { onMounted } from 'vue';


onMounted(() => {
    console.log('test mounted')
})
</script>

<template>
    <div>this is test</div>
</template>

I visit /about/test. about/index.vue not mounted

[posva]

Move /pages/about/index.vue to /pages/about/test.vue

[feijihe]

sorry! I haven't succeeded yet.

pages/
├── about
├────index.vue
├────test.vue
App.vue

The result is still the same. /about/test
App mounted ===> test mounted

Expected result

App mounted ==> about mounted ===> test mounted

[posva]

You moved the other file. Read the comment again 😅