nested dynamic routes are not working on page, but do on refresh

[amir20]

Goal

I want to create a nested route like the following:

1. /container/<id> goes to ContainerView
2. /container/<id>/time/<date> goes to ContainerTimeView.

What I did

I have created the following directory

• /container
  • [id].vue
  • logs
    • [date].vue
    • index.vue

Based on the discussion I found, I created the following:

[id].vue

  <router-view></router-view>

index.vue and [date].vue map to proper components as expected.

Problem

This doesn't seem to work as expected. It creates

'/container/[id]': RouteRecordInfo<'/container/[id]', '/container/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
'/container/[id]/': RouteRecordInfo<'/container/[id]/', '/container/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
'/container/[id]/time/[date]': RouteRecordInfo<'/container/[id]/time/[datetime]', '/container/:id/time/:date', { id: ParamValue<true>, date: ParamValue<true> }, { id: ParamValue<false>, date: ParamValue<false> }>,   

And when navigating to /container/<id> it doesn't work. But IF I REFRESH THE PAGE, it does work. 😐

If I fixed [id].vue to:

<template>
  <router-view v-if="nested.params.date"></router-view>
  <template v-else>
//    contents of index.vue
</template>
</template>

Then this works.

Is this to be expected? Is there a way to have the two routes exist? It seems like without <router-view> the nested route won't work. Which I think is counter intuitive.

[amir20]

Seems like it's better to use [id].time.[date].vue instead since I don't need it to be nest with parent template.

However, it does seem to be a bug with nested routes for navigating the first time. It doesn't work.

I can try to recreate it if that helps? @posva ?

[posva]

You are missing the component that creates a layout (component + folder). There is an example in the docs

[amir20]

No, I just didnt show that part. I have been using this lib for a while now.

I can try to reproduce this with an example. But given it doesn’t work and then it works on page refresh, it is most likely a bug.

[posva]

Let me know if you create a boiled down reproduction then

[amir20]

I spent some time creating a working prototype. I wasn't able to reproduce it and am unsure what is different. I'll see if I can replicate it in my original project.